初学Three.js : 场景搭建

2023-11-08

关于Three.js : 场景搭建的知识,可结合这两篇文章学习。

https://juejin.im/post/5ab07d186fb9a028b92cf79d

官方文档

说明:

  1. 第一篇中给出的three.js,我在使用时出现错误,遂引用了官方文档给出的three.js。
  2. 第一篇文章代码此处有误。如图。应去掉分号。
  3. 本人使用chrome

以下是我的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/three.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<script>
			//生成场景
			let scene = new THREE.Scene();
			console.log(1)
			//生成照相机
			let camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
			
			//three.js坐标
			camera.position.set(0, 0, 10);

			//渲染器
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);

			document.getElementById('container').appendChild(renderer.domElement);

			//准备就绪,开始产生立方体
			let cubeGeometry = new THREE.BoxGeometry(1,1,1);
			let cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000});
			let cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
			scene.add(cube);
			camera.position.z = 5;
			
			var animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};
			
			animate();
			
		</script>
	</body>
</html>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

初学Three.js : 场景搭建 的相关文章

  • 如何将 3D 模型从 Cinema4D 导出到 Three.js?

    如果我有一个网格建模4D影院 我怎样才能将其导出three js http github com mrdoob three js3D JS 引擎 另外 导出材料也很方便colors for 多边形选择 为此 我刚刚为 Cinema4D 编写
  • Three.js:为 BufferGeometry 设置索引/索引的正确方法?

    我正在尝试在 BufferGeometry 中设置每个面的 UV 索引 我从几何开始 我的几何体的每个面都有一个face materialIndex对应于紫外线指数 我正在尝试将其转换为 BufferGeometry 然后映射到face m
  • 在 ThreeJS 中将 2D 鼠标坐标转换为世界 XZ 坐标

    我需要将鼠标屏幕坐标转换为 XZ 平面上的 ThreeJS 世界坐标 我发现这个工作代码可以将鼠标位置转换为 XY 世界坐标 但我不知道如何修改它以获取 XZ 坐标 var vector new THREE Vector3 vector s
  • 如何在 Three.js 上覆盖 HTML 文本/按钮?

    好的 很新three js在这里 但我正在努力实现谷歌所拥有的https beinternetawesome withgoogle com interland https beinternetawesome withgoogle com i
  • Three.js 通过加载模型上的材质名称为材质添加边框

    是否可以在材料周围添加边框 如图所示 我可以通过以下代码设置材质颜色 object traverse function child if child instanceof THREE Mesh child material color se
  • 将 A 框架与 Three.js 相结合

    我想知道 是否可以将 Three js 元素添加到 A 框架场景中 假设 A frame 是基于 Three js 构建的 并且 three Version 0 74 0 登录到你的控制台这不应该是一件奇怪的事情 对吧 我在我的 A 框架场
  • Three.js 中几何图形的事件处理? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在寻找对 Three js 中的几何图形 相机 灯光 我们添加到场景中的东西 进行某种事件处理 我用谷歌搜索但找不到任何相关内容
  • 深度图三.js

    Three js中有没有办法获取深度图 我感兴趣的是制作类似于 Kinect 为给定场景制作的东西 我遇到了一种不使用颜色和雾来模仿这一点的黑客方法 但这并不理想 因为它会使用两个不同的场景并且会因光照而变化 我认为执行此操作的另一种方法是
  • 可点击的精灵标签?

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit
  • 调试 Three.js 中的低 FPS

    我正在处理 Three js WebGL 场景 当我缩小时 我注意到 60 FPS 以便所有观察结果 约 20 000 个三角形 都在视图中 但当我放大时 FPS 非常低 因此只有一个小三角形的子集在视野中 我想弄清楚是什么导致了这种差异
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 Three js 应用程序 它将一堆圆圈从画布的底部移动到顶部 let renderer scene light circles camera initialize animate funct
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • 在 TypeScript 中使用三个 Js + OrbitControl

    我无法得到this http www example com 在 TypeScript 中使用上述组合的示例 I have and 在我的html中和打字稿文件
  • Three.js 对象的“中心”是什么?

    当我使用 Blender 对对象进行建模时 我能够明确定义其发生平移和旋转的中心位置 当使用 Three js 对象时 我似乎没有找到等效的对象 Three js 对象是否具有定义其 中心 位置的属性 如果不是 物体的中心是如何确定的 在
  • Three.js 椭圆

    如何在 Three js 中创建一个椭圆 我看过这个 在 THREE js 中绘制椭圆 https stackoverflow com questions 11419896 drawing an ellipse in three js 但如
  • 开始使用 Three.js 中的行进立方体

    我是 Three js 的新手 正在寻找教程来帮助我开始了解如何在 Three js 中使用 Marching Cubes 到目前为止 我在 Three js 中看到的一些使用它的项目对我来说有点复杂 所以一个简单的教程会很好 谢谢 像您一
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • 无面点云 (PLY) 文件的 Web 查看器

    我在尝试Three Js https github com mrdoob three js 用于通过网络查看 PLY 文件 使用这个例子 http threejs org examples webgl loader ply html作为参考
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 使用文件 API 将资源加载到 Three.js 中

    我想创建导入 3D 模型以在浏览器中查看的功能 方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好 我的理解是加

随机推荐

  • ant.design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法后的结果

    ant design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法后的结果 前几天在做项目时碰到了这么一件事 就是在input上面同时绑定onBlur事件和onPressEnter 而且这两个事件还同时使
  • Python爬虫实战案例——第二例

    某某美剧剧集下载 从搜索片名开始 本篇文章主要是为大家提供某些电影网站的较常规的下载电影的分析思路与代码思路 通过爬虫下载电影 我们会从搜索某部影片的关键字开始直到成功下载某一部电影 地址 aHR0cHM6Ly93d3cuOTltZWlqd
  • esp32 SPIFFS的使用

    读取方法 include FS h include SPIFFS h include AutoFile h void File Init SPIFFS begin true 挂载 时间较长 void contentWrite String
  • 目标检测 - 主流算法介绍 - 从RCNN到DETR

    目标检测是计算机视觉的一个非常重要的核心方向 它的主要任务目标定位和目标分类 在深度学习介入该领域之前 传统的目标检测思路包括区域选择 手动特征提取 分类器分类 由于手动提取特征的方法往往很难满足目标的多样化特征 传统方法始终没能很好的解决
  • Inno Setup 添加管理员权限

    1 在 Setup 节点添加 PrivilegesRequired admin 2 在Inno Setup的安装目录下有个SetupLdr e32文件 用exescope打开 然后在十六进制区域编辑 在右边ASCII显示区域无法编辑 修改到
  • 关于新版vscode的ul>li*3等,不提示快捷方式解决方法

    到文件首选项的设置里搜索emmet 然后找到Emmet Use Inline Completions 勾选上就可以了 快捷方式 如ul gt li 3 加上tab键 注意按enter键无效
  • MKL——常用函数说明

    Intel MKL 全称 Intel Math Kernel Library 提供经过高度优化和大量线程化处理的数学例程 面向性能要求极高的科学 工程及金融等领域的应用 MKL是一款商用函数库 提供C Fortran 和 Fortran 9
  • 以太坊的企业系统集成

    最流行的开源Java集成库 Apache Camel现在支持以太坊的JSON RPC API 以太坊生态系统 以太坊是一个开源 公共 区块链平台 用于运行智能合约 它提供了一个去中心化的图灵完备虚拟机 可以执行脚本和加密货币 用于补偿参与者
  • Android 根目录下和应用目录下的build.gradle的详解,以及groovy语法的讲解

    博主前些天发现了一个巨牛的人工智能学习网站 通俗易懂 风趣幽默 忍不住也分享一下给大家 点击跳转到网站 前言 Gradle的作用 打apk包 打插件包 自动化构建 多渠道打包 自动化签名 后台java打包 生成文件 使用的是groovy语法
  • 数据中台-数据安全管理-11

    文章目录 数据安全管理 11 1 数据安全面临的调整 11 1 1 数据安全问题带来的4大损害 11 1 2 法律和政策背景 11 1 3 数据安全的4大技术挑战 1 平台安全 2 服务安全 3 数据本身的安全 4 APT攻击防御 11 1
  • 华为OD机试 - 阿里巴巴找黄金宝箱(I)(Java)

    题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上 无意中发现了强盗集团的藏宝地 藏宝地有编号从0 N的箱子 每个箱子上面贴有一个数字 箱子中可能有一个黄金宝箱 黄金宝箱满足排在它之前的所有箱子数字和等于排在它之后的所有箱子数字之和 第一个箱子
  • Verilog实现呼吸灯效果

    呼吸灯的效果采用PWM调波的形式 即快速的改变每个周期的占空比 一个周期内高电平时间占一个周期时间的比值 来实现点亮到熄灭的效果 示意如下图 而关于整个波形图 用50MHz的晶振 从0开始计数到49则为1us 而1ms是1us的1000倍
  • elasticsearch update 无结果

    这个一直不能用 for id in data front res es update index index doc type doc type id id body doc flag 0 print id res break total
  • Android 块设备驱动之二

    将块设备添到系统 添加磁盘和分区到系统中 add diskgendisk函数 register disk add partition 块设备操作 读写操作 请求操作 提交读写请求 将块设备添到系统 调用void blk register r
  • 【Linux】网络编程二:socket简介、字节序、socket地址及地址转换API

    参考连接 https www nowcoder com study live 504 2 16 Linux 网络编程一 网络结构模式 MAC IP 端口 网络模型 协议及网络通信过程简单介绍 Linux 网络编程二 socket简介 字节序
  • JS 终止执行的方法

    一 在function里面 1 return 2 return false 二 非function方法里面 alert before error throw SyntaxError alert after error 三 非function
  • windows下运行pointnet(全)

    放假闲着在家没事 本人突然想跑一下3d深度学习的开山之作 pointnet玩一玩 可是目前网上大部分pointnet的运行教程都是在Ubuntu系统下的 其实本人也曾装过双系统 但是因为我太菜了 在Ubuntu下装完显卡驱动和cuda后切换
  • Linux配置连接wifi功能步骤总结

    1 配置wpa supplicant conf文件 基本内容如下 ctrl interface var run wpa supplicant ctrl interface group 0 update config 1 network ss
  • Visual Studio中输入英文会在字母之间自动增加空格

    现象 不小心按了什么键之后字母之间增加了空格 如下面 在这里插入图片描述 https img blog csdnimg cn b211b973b9c8470fae4402161ddb3935 png 解决办法 针对上面图片中显示的这种英文字
  • 初学Three.js : 场景搭建

    关于Three js 场景搭建的知识 可结合这两篇文章学习 https juejin im post 5ab07d186fb9a028b92cf79d 官方文档 说明 第一篇中给出的three js 我在使用时出现错误 遂引用了官方文档给出