文件目录：
代码：
main.html ↓
<!DOCTYPE html>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
/***************************start 1.创建场景，相机和渲染器 start************************/
// 场景
var scene = new THREE.Scene();
// PerspectiveCamera：相机 默认位置是坐标(0, 0, 0)
// param1：视野。在任何给定时刻在显示器上看到的场景的范围。该值以度为单位
// param2：宽高比。
// param3：相机能拍摄到的最近距离。
// param4：相机能拍摄到的最远距离。
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器渲染app的大小 3个参数
// param3：false 保持app大小但以较低的分辨率呈现 默认为true
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
/*****************************end 创建场景，相机和渲染器 end**************************/
/***************************start 2.创建立方体 start************************/
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 传入几何对象和材质
var cube = new THREE.Mesh( geometry, material );
// 插入到场景中，默认添加到坐标(0, 0, 0)
scene.add( cube );
// 或camera.position.set(0, 0, 5)
camera.position.z = 5;
/***************************end 创建立方体 end************************/
var animate = function () {
// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>three.js ↓
https://threejs.org/build/three.js
效果：
↑ 一直不停旋转着的骚气荧光绿立方体
参考：
https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
1620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
