关于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>