html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>a_threeJS_one</title>
- <style>
- #canvas{
- width:1100px;
- height:600px;
- background:palevioletred;
- border:1px solid;
- }
- </style>
- <!-- 步骤 (自认为)
- 1. 设置 three.js 渲染器
- 2. 设置场景 scene
- 3. 设置物体 object
- 4. 设置摄像机 camera
- 5. 设置光源 light
- -->
- <script type="text/javascript" src="https://threejs.org/build/three.js"></script>
- <script>
- // 渲染器
- var renderer;
- function init_Three_renderer(){
- width = document.getElementById("canvas").clientWidth;
- height = document.getElementById("canvas").clientHeight;
- renderer = new THREE.webGLRenderer({ // 生成渲染对象
- antialias : true // 去锯齿
- });
- renderer.setSize(width,height);// 设置渲染的宽度和高度;
- document.getElementById("canvas").appendChild(renderer.domElement);
- renderer.setClearColor(0xEEEEEE,1);// 设置渲染的颜色;
- }
- // 场景
- var scene;
- function init_Three_scene(){
- scene = new THREE.Scene();
- }
- // 物体
- var cube;
- function init_Three_object(){
- var geometry = new THREE.CubeGeometry(20, 20, 20); // 几何体 (长, 宽, 高)
- // var texture = THREE.ImageUtils.loadTexture("b.jpg",null,function(t){});// 添加纹理
- // var material = new THREE.MeshLambertMaterial({color:0x00ff00,map:texture});
- var material = new THREE.MeshLambertMaterial({color:0x00ff00}); // 表面有光泽的材质类型
- cube = new THREE.Mesh(geometry,material);
- // cube.position.set(0,0,0); // 设置几何体的位置 (x,y,z)
- scene.add(cube);
- }
- // 相机
- var camera;
- function init_Three_camera(){
- camera = new THREE.PerspectiveCamera(50,width/height,1,5000); // 透视相机
- // (可视角度, 可视范围的长宽比, 相对于深度剪切面的近的距离 必须为正数, 相对于深度剪切面的远的距离 必须为正数)
- camera.position.x = 20
- camera.position.y = 20;
- camera.position.z = 50;
- camera.up.x = 0;// 设置相机的上为x轴方向
- camera.up.y = 1;// 设置相机的上为y轴方向
- camera.up.z = 0;// 设置相机的上为z轴方向
- camera.lookAt({x:0,y:0,z:0}); // 设置视野的中心坐标
- }
- // 光源
- var light;
- function init_Three_light(){
- light = new THREE.DirectionalLight(0xffffff,1);// 设置平行光源 (光颜色, 光强度)
- light.position.set(10,30,20);// 设置光源向量 (x,y,z)
- scene.add(light);
- }
- function ThreeJs_Main(){
- init_Three_renderer();// 渲染
- init_Three_scene();// 场景
- init_Three_object();// 物体
- init_Three_camera();// 相机
- init_Three_light();// 光源
- variation(); // 动画循环
- }
- function variation(){
- cube.rotation.x += 0.01;
- cube.rotation.y += 0.01;
- renderer.clear();
- renderer.render(scene,camera);
- requestAnimationFrame(variation);
- }
- </script>
- </head>
- <body onload="ThreeJs_Main()">
- <div id="canvas"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/39421/a67d873496b2172873682c2ddea6b012.html