標籤：const cti 環境光線 事件監聽 list 材質 rspec ber title
需要引入相機控制外掛程式OrbitControls
1 <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script>2 <script src="framework/three.js"></script>3 <script src="framework/OrbitControls.js"></script>
直接看代碼
1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" type="text/css" href="stylesheets/main.css"> 6 <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script> 7 <script src="framework/three.js"></script> 8 <script src="framework/OrbitControls.js"></script> 9 <title>three</title>10 <script>11 window.onload = function() {12 // 建立情境元素13 const scene = new THREE.Scene();14 15 // 建立網個模型16 const geometry = new THREE.BoxGeometry(100, 100, 100); //長寬高 幾何對象17 const material = new THREE.MeshLambertMaterial({18 color: 0xff000019 }); //顏色 材質對象20 // 模型21 const mesh = new THREE.Mesh(geometry, material);22 scene.add(mesh); // 加入到情境23 24 // 添加燈光25 const Light = new THREE.PointLight(0xffffff); // 點光源26 Light.position.set(300, 400, 200);27 scene.add(Light); //添加燈光進去28 29 //加入一個環境光線30 scene.add(new THREE.AmbientLight(0x333333));31 32 // 添加相機33 const camera = new THREE.PerspectiveCamera(40, 800 / 600, 1, 1000);34 camera.position.set(200, 200, 200); //相機位置35 camera.lookAt(scene.position); //向著情境中心36 37 // 建立渲染器38 const renderer = new THREE.WebGLRenderer();39 renderer.setSize(800, 600); // 渲染器尺寸40 document.body.appendChild(renderer.domElement) // 加入文檔41 42 // 渲染43 function render() {44 renderer.render(scene, camera); //傳入情境和相機45 }46 render();47 48 // 建立相機控制器，需要引入庫 傳入對象49 const controls = new THREE.OrbitControls(camera); //傳入這個相機，滑鼠操作的時候相機控制器會改變相機的參數50 // 加入事件監聽處理51 controls.addEventListener(‘change‘, render); //改變參數之後同時渲染情境52 53 }54 </script>55 </head>56 57 <body>58 <div id="app"> </div>59 </body>60 61 62 </html>
哦，這其實只是個正方形！
webGL相機控制器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
