標籤：title append 渲染 情境 座標 class rip oct 捲軸
看結果：
看源碼及解釋：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First Scene</title> <style type="text/css"> body { /*移除所有的捲軸*/ margin: 0; overflow: hidden; } </style></head><body> <div id="WebGL-output"></div> <script type="text/javascript" src="./libs/three.js"></script> <script> var scene = new THREE.Scene(); // 情境容器, 用來儲存並跟蹤所有我們想渲染的物體 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相機變數, 我們能夠在渲染好的情境scence裡看到什麼 var renderer = new THREE.WebGLRenderer(); // 渲染器對象, 負責計算指定相機角度下瀏覽器中scene的樣子 renderer.setClearColorHex(0xEEEEEE); // 將renderer對象的背景色設定為0xEEEEEE renderer.setSize(window.innerWidth, window.innerHeight); // 讓renderer對象將scene渲染成多大尺寸 var axes = new THREE.AxisHelper(20); // axes座標軸對象 scene.add(axes); // 把座標軸添加到情境中去 var planceGeometry = new THREE.PlaneGeometry(60, 20); // PlaneGeometry: 翻譯 平面幾何 (參數: 寬60, 高20) var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc }); // MeshBasicMaterial: 翻譯 基礎網格材質 (用來設定平面的外觀, 顏色，透明度等) var plane = new THREE.Mesh(planceGeometry, planeMaterial); // 把這2個對象合并到一個名為plane(平面)的Mesh(網格)對象中 plane.rotation.x = -0.5*Math.PI; // 繞x軸旋轉90度 plane.position.x = 15; // 平面座標位置 plane.position.y = 0; plane.position.z = 0; scene.add(plane); // 將平面添加到情境 var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); // Geometry: 翻譯 立方體幾何 var cubeMaterial = new THREE.MeshBasicMaterial({ color: ‘#12B7F5‘, wireframe: true }); // 立方體是0xff0000顏色 wireframe： 線框屬性設定為true var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 把立方體和他的外觀合并一下 cube.position.x = -3; // 立方體的座標位置 cube.position.y = 3; cube.position.z = 0; scene.add(cube); // 將立方體添加進去情境中去 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); // 球體 var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true }); // 球體的外觀 var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 把球體和外觀合并一下 sphere.position.x = 20; // 球體的位置 sphere.position.y = 4; sphere.position.z = 2; scene.add(sphere); // 把球體添加進情境去 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // lookAt函數指向情境的中心 document.querySelector(‘#WebGL-output‘).appendChild(renderer.domElement); // 把canvas添加到指定的dom中 renderer.render(scene, camera); // 使用渲染器渲染 </script></body></html>
demo查看：
http://wx.indoorun.com/indoorun/wxtest/three/first-scene.html
three.js - 渲染並展示3D 物件
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
