初学Three.js : 场景搭建

最新推荐文章于 2024-05-29 16:35:44 发布

banana_yaya

最新推荐文章于 2024-05-29 16:35:44 发布

阅读量591

点赞数

文章标签： three.js

本文链接：https://blog.csdn.net/Chen18125/article/details/88073924

版权

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

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

官方文档

说明：

第一篇中给出的three.js，我在使用时出现错误，遂引用了官方文档给出的three.js。
第一篇文章代码此处有误。如图。应去掉分号。
本人使用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>

banana_yaya

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学Three.js : 场景搭建

关于Three.js : 场景搭建的知识，可结合这两篇文章学习。https://juejin.im/post/5ab07d186fb9a028b92cf79d官方文档说明：第一篇中给出的three.js，我在使用时出现错误，遂引用了官方文档给出的three.js。第一篇文章代码此处有误。如图。应去掉分号。本人使用chrome以下是我的代码：&lt;!DOCTYPE ...
复制链接

扫一扫