Three.js學習筆記05

阿新 • • 發佈：2018-01-15

geo spec date 應用 rtm js學習筆記 setsize 技術分享 image

場景相關函數和屬性

技術分享圖片

下面的代碼中應用到了所有以上的函數及屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"
            src="libs/three.js"></script>
    <script type="text/javascript"
            src="libs/stats.js"></script>
    <script type="text/javascript"
            src 
="libs/dat.gui.js"></script>
    <style>
        body{
            /*移除滾動條*/
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>
<script type="text/javascript">
    function 
 init(){
        var scene=new THREE.Scene();
        //scene.fog=new THREE.Fog(0xffffff,0.1,100);//顏色、近處、遠處，越遠濃度越高
        scene.fog=new THREE.FogExp2(0xffffff,0.015);//顏色、濃度

        var stats=new initStats();

        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
        camera.position.x=-30;
        camera.position.y 
=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        scene.add(camera);

        var renderer=new THREE.WebGLRenderer();
        renderer.setClearColor(0xFFFFFF,1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMapEnabled=true;

        var planeGeometry=new THREE.PlaneGeometry(60,50,1,1);
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;
        plane.receiveShadow=true;
        scene.add(plane);

        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-30,80,-10);
        spotLight.castShadow=true;//此光源產生陰影
        scene.add(spotLight);

        var ambientLight=new THREE.AmbientLight(0x0a0a0a);
       // ambientLight.castShadow=true;//此光源產生陰影
        scene.add(ambientLight);



        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var controls=new function(){
            this.rotationSpeed=0.02;
            this.numberOfObjects = scene.children.length;

            this.addCube=function(){
                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry=new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
                var cubeMaterial=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
                var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
                cube.castShadow=true;
                cube.name="cube-"+scene.children.length;
                cube.position.x=-30+Math.round(Math.random()*planeGeometry.parameters.width);
                cube.position.y=Math.round(Math.random()*5);
                cube.position.z=-25+Math.round(Math.random()*planeGeometry.parameters.height);
                scene.add(cube);
                this.numberOfObjects=scene.children.length;
            };

            this.removeCube=function(){
                var allChildren=scene.children;//獲取場景中所有子對象的列表
                var lastObject=allChildren[allChildren.length-1];
                if(lastObject instanceof THREE.Mesh){
                    scene.remove(lastObject);
                    this.numberOfObjects=scene.children.length;
                }
            };

            this.outputObjects = function () {
                console.log(scene.children);
            };

        };

       // scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});//設置所有物體的材質屬性

        var gui=new dat.GUI();
        gui.add(controls,‘rotationSpeed‘,0,1.0);//範圍為0-0.5
        gui.add(controls, ‘addCube‘);
        gui.add(controls, ‘removeCube‘);
        gui.add(controls, ‘outputObjects‘);
        gui.add(controls, ‘numberOfObjects‘).listen();

        render ();

        function render() {
            stats.update();
            scene.traverse(function (e) {//將一個函數作為參數傳遞進來，這個傳遞進來的函數將會在場景的每一個子對象上調用一次
                if (e instanceof THREE.Mesh && e != plane) {
                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            stats.domElement.style.position = ‘absolute‘;
            stats.domElement.style.left = ‘0px‘;
            stats.domElement.style.top = ‘0px‘;
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

    }
    window.onload=init;
    </script>
</body>
</html>

運行效果如下圖：

技術分享圖片

Three.js學習筆記05

geo spec date 應用 rtm js學習筆記 setsize 技術分享 image 場景相關函數和屬性下面的代碼中應用到了所有以上的函數及屬性： <!DOCTYPE html> <html lang="en"> <head>

Three.js 學習筆記(1)--坐標體系和旋轉

external 單位 svg cal resource nsf font cos 證明前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight,

Three.js學習筆記-注意事項

旋轉尤拉角（Euler angles）容易遭遇一個所謂“萬向節鎖（gimbal lock）”的難題，也就是在某些特定點（類似於地球南北極極點），物體的座標突變會導致某個維度的旋轉變換失效。Gimbal_lock因此，物件旋轉總是使用其四元數 quaternion 屬性來儲存。矩形

Three.js學習筆記-Blender匯出的gltf格式的材質無法顯示問題處理

程式碼 var gltfLoader = new THREE.GLTFLoader(); gltfLoader.load( 'assset/test/testgltf1.gltf', function ( gltf ) {

three.js學習筆記 Physijs物理引擎

Three.js可以通過使用Physijs庫向場景中加入物理效果。這個庫是基於著名的物理引擎ammo.js。 Physiji 1.匯入庫檔案 Physijs.scripts.worker =

Three.js學習筆記-Materials(材料)

Material## 抽象的所有材料的基類，展示了物件的外觀建構函式 Material() 特性 alphaTest : Float 渲染的材質的opacity小於這個設定的值時將不會被渲染出來 blendDst: Integer 材料的混合必須設定為Cus

《Three.js學習筆記02》場景中新增網格物件

<!DOCTYPE html><html><head> <title> First Scene</title> <script type="text/javascript" src="../assets/three.min.js"&

three.js學習筆記（三）-camera.up屬性探索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

Three.js學習筆記-Core(核心)

BufferAttribute 儲存和BufferGeometry相關的屬性(如定點位置，面部索引，法線，顏色和UV，自定義屬性) 建構函式 BufferAttribute( array : TypedArray, itemSize : Integer,

WebGL three.js學習筆記自定義頂點建立幾何體

auto getchild clear wid charset dem idt process 初始自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的

WebGL three.js學習筆記使用粒子系統模擬時空隧道（蟲洞）

藍色 raw mat charset rgb out title ble 以及 WebGL three.js學習筆記使用粒子系統模擬時空隧道本例的運行結果如圖：時空隧道demo演示 Demo地址：https://nsytsqdtn.github.io/demo/36

WebGL three.js學習筆記載入外部模型以及Tween.js動畫

WebGL three.js學習筆記載入外部模型以及Tween.js動畫本文的程式實現了載入外部stl格式的模型，以及學習瞭如何把載入的模型變為一個粒子系統，並使用Tween.js對該粒子系統進行動畫設定模型動畫demo演示(網頁載入速度可能會比較慢) demo地址：https://nsytsqdtn.

WebGL three.js學習筆記 6種類型的紋理介紹及應用

透視投影 qdt 高度我們幾何區別 set 亮度 cubemap WebGL three.js學習筆記 6種類型的紋理介紹及應用本文所使用到的demo演示：高光貼圖Demo演示反光效果Demo演示（因為是加載的模型，所以速度會慢）（一）普通紋理計算機圖形學中

CSS學習筆記05 CSS display屬性

嵌套 img ges htm 現在 inline 內聯元素 itl 註意 HTML標記一般分為塊標記和行內標記兩種類型，它們也稱塊元素和行內元素。塊元素每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。並且

vue.js學習筆記

bsp 系統特性學習數據綁定學習筆記開始問題 mvvm模式 1、vue.js的目的 Vue的產生主要是解決三個問題 1.1、主要解決的是數據綁定的問題 1.2、主要是構建大型的單頁面程序，解決app頁面卡頓的問題 1.3、支持組件式開發，采用積木式編程

node.js學習筆記二之版本問題

nodejs targe tle 下一個 .cn blank 網站 mage 功能一、版本說明進入node.js官網https://nodejs.org/en/download/ 點擊上面的【All download options】進入到所有下載列表的地址下載地

js學習筆記23----窗口尺寸及窗口事件

推薦距離 bsp spa cnblogs offset borde code ini 窗口尺寸：可視區的尺寸 document.documentElement.clientWidth document.documentElement.clientHeight

js學習筆記25----Event對象

blog oct tro 一個函數定義 ttr span doctype char Event : 事件對象，當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息都會被臨時保存到一個指定的地方-event 對象，供我們在需要時調用。事件對象必須在

JS學習筆記-構造函數篇

返回值 def 說明 ins 是否 fun eight array per 創建實例funtion Fn (){ var num = 10; this.x = 100; this.getX = function(){ console.

js學習筆記28----事件默認行為

onclick html ice 菜單 lang -- char top get 事件默認行為：當一個事件發生的時候瀏覽器自己會默認做的事情。怎麽阻止？當前這個行為是什麽事件觸發的，然後在這個事件的處理函數中使用return false; 右鍵菜單事件 o

Three.js學習筆記05

相關推薦