用three.js制作一個旋轉的正方體

阿新 • • 發佈：2017-10-23

() end ont 幾何體 style ctype 分別是 document camera

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

    <script src="../js/three.js"></script>
    <style>
        canvas{
            width:100% !important;
            height: 100% !important;
        }
    </style>
</head>
<body>

</body>
<script>
    // 
定義場景
    var scene = new THREE.Scene();
    /*
        75：相當於相機的視角是75度，可以理解為人的上眼皮和下眼皮的夾角。此處是相機可以看到的景物的夾角
         window.innerWidth/window.innerHeight：近平面的縱橫比，也就是寬高比，如果大於1，那麽說明相機拍攝出的物體的寬度大於高度
        1：相機最近能夠拍攝到的位置
        1000：相機最遠能拍攝到的位置
     */
    var camera =new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
    var 
 renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);
    //創建一個幾何體對象，這個幾何體對象是矩形的（正方形是特殊的矩形），參數分別是該矩形的長寬高
    var geometry = new THREE.CubeGeometry(2,2,2);
    /*定義該幾何體的材質，可以這樣理解：geometry是我們定義的一個幾何體，但這只是一個空架子，我們需要用材質來將這個架子填充起來，從而使
        我們能夠在網頁上看到這個幾何體實體。材質可以是顏色，紋理等等
     
*/
    var material  = new THREE.MeshBasicMaterial({color:0xff000});
    //將幾何體和材質聯系起來，相當於將顏色這些東西粉刷到幾何體上，就成為了一個我們肉眼可見的幾何實體cube
    var cube = new THREE.Mesh(geometry,material);
    //將實體加入到場景當中
    scene.add(cube);
    //相機的坐標在z軸，相機默認的原點是在我們屏幕的中心
    camera.position.z = 5;
    function render(){
        //循環調用render（）
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        renderer.render(scene,camera);
    }
    render();
</script>
</html>

技術分享

用three.js制作一個旋轉的正方體

() end ont 幾何體 style ctype 分別是 document camera <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

用JS制作一個信息管理平臺

平臺 get ffffff sessions document pla spl rem efi 首先，介紹一些需要用到的基本知識。【JSON】 JSON是數據交互中，最常用的一種數據格式。由於各種語言的語法都不相同，在傳遞數據時，可以將自己語言中的數組、對象等轉換為J

用JS制作一個信息管理平臺完整版

15位 spa 常用復制代碼 ora local data- off parseint 前言 JRedu 在之前的文章中，介紹了如何用JS制作一個實用的信息管理平臺。但是那樣的平臺功能過於簡陋了，我們今天來繼續完善一下。首先我們回顧一下之前的內容。

使用WebGL + Three.js制作動畫場景

http hang log orm monitor 放置 tor mes quest 使用WebGL + Three.js制作動畫場景 3D圖像，技術，打造產品，還有互聯網：這些只是我愛好的一小部分。現在，感謝WebGL的出現－一個新的JavaScriptAPI，它可以

slz-用eclipse制作一個簡單的程序

.cn src 建立步驟 cli 制作 com logs .com 步驟 1:建立一個名為slz-用eclipse制作一個簡單的程序

用免費自助建站，自己也能制作一個讓別人仰望的網站

自助建站自己做網站網站建設網站制作網站制作只是網站建設中的一步，網站制作完之後還要其他的維護工作。那麽，企業是如何通過凡科進行自助建站呢？怎樣才能建一個成功的站呢？在網絡信息發達的今天，網上不乏各種建站教程和攻略，建站新手面對如此多樣的教程感到更迷惑了，各種方法都有各自的道理，

用QT制作一個抽獎器的總結

get add ring 判斷應該 idg 收獲文檔 lotto 配置XML文件加載抽獎信息需要一個合適的配置文件，我知道的除了記事本文件就只有xml文件了。果斷選擇後者的原因很簡單，抽獎信息不是很大，而且可以定向查找和修改。我一開始是打算完全使用QT自帶的函數接口

[js高手之路] html5 canvas教程 - 制作一個數碼倒計時效果

[0 2017年需要 false image 之路 pla left query 效果圖：這個實例主要註意: 1，剩余時間的計算 2，每個時間數字的繪制時間主要有0-9和一個冒號組成，用數組來表示( 0: 就是不畫圓，1：就是畫一個藍色的圓 ) num.

Linux系統裁減之，制作一個極度精簡的Linux－用腳本實現自動拷貝命令和依賴庫文件

用腳本實現自動拷貝命令和依賴庫文件第2章用腳本實現自動拷貝命令和依賴庫文件這篇文章主要是對我上一篇博文http://blog.51cto.com/linuxprince/2045703加以完善的，前一篇文章中拷貝命令和依賴庫文件的過程是完全手工方式的，顯得特別LOW，這章把該過程完善一下，用

用Java制作一個簡單的圖片驗證碼

err 一個 graphic opera login new pri buffer image //Java實現簡單驗證碼功能 package project; import java.awt.Color; import java.awt.Font;import java.

C++程設實驗項目二：用正則表達式制作一個簡易的SQL系統

search linux c++ AC 2.0 地方文件的由於 font 本文將盡可能簡單地概括如何搭起這個SQL系統的框架。一、正則表達式分析語句首先需要使用c++的regex庫： #include <regex> 推薦到菜鳥教程上了解正則表達

three.js入門系列之旋轉的圓臺、球體、正方體

先來張圖：一、調整機位和輔助線由上述程式碼可知，現在的機位是三維座標軸上的點（2,2,2），方框的那一句很重要，有了這一句，你將獲得上帝視角！！！接下來新增輔助線（立體空間三軸）：這樣就添加了一個軸輔助線，由於我們是站在（2,2,2），所以看到的輔助線是這樣的：這是一個標

結合js利用畫布制作一個時鐘

狀態 interval width 三角函數 ets i++ 分享 getc 小時首先搭建canvas畫布格式：動態獲取畫布的寬和高方便變換，利用translate將圓中心坐標改為0 0； <canvas width="800px" heig

[前端隨筆][CSS] 制作一個加載動畫即帖即用

耗資源 mil 實現 strong 代碼 ... 畫圖 str css 說在前面描述 [加載中loading...] 的動畫圖片往往使用GIF來實現，但GIF消耗資源較大，所以使用CSS直接制作更優。關鍵代碼 [前端隨筆][CSS] 制作一個加載動畫

用dialog包制作窗口

info 註意 ext inf spa mem mktemp ear selection 1 #!/bin/bash 2 3 temp=$(mktemp -t test.XXXXXX) 4 temp2=$(mktemp -t test.XXXXXX) 5

如何制作一個有說服力的營銷網站

網站優化網站建設自助建站對於企業和商家來說，網站最大的一個作用就是可以用來宣傳展示以及是營銷產品，從而為經營帶來收益，對於這樣的網站，網絡上也開始給了它一個專業的說法——營銷型網站，正如它的字面所說，營銷型網站為的就是營銷，幫助企業商家到達盈利的目的。營銷型網站在制作上比普通展示類網站

fis3+vue+pdf.js制作預覽PDF文件或其他

制作 idt 心得路徑 cal 構建 ack 功能 demo 　　人生第一篇博客，的確有點緊張，但有些許興奮，因為這對於我來說應該是一個好的開始，以此勵誌在技術的道路上越走越遠。　　看過了多多少少的技術博客，給自己帶來了很多技術上的收獲，也因此在想什麽時候自己也可以贈人

如何在PPT中快速制作一個二維碼？

office 工具大家在制作PPT應該都用這樣的經歷，需要制作一個二維碼能讓觀眾掃描關註網站、公眾號等等。一般做法是先制作好相關二維碼圖片，然後在PPT中插入圖片。有沒有方法在PPT中直接制作一個二維碼呢？有！下面以Office2016例子介紹一個的“高端”功能。普及一下：什麽是二維碼容錯率？

利用Bootstrap制作一個流行的網頁

設置 lock fun 技術 absolute dev ucc col dsm 首先是html承載內容： <!DOCTYPE html> <html lang="zh_CN"> <head> &l

[知了堂學習筆記]_純JS制作《飛機大戰》遊戲_第1講(實現思路與遊戲界面的實現)

hid width 解決 -1 出現 span port webkit rom 整體效果展示：一、實現思路如圖，這是我完成該項目的一個邏輯圖，也是一個功能模塊完成的順序圖。遊戲界面的完成英雄飛機對象實現，在實現發射子彈方法過程中，又引出了子彈對象並實現。

用three.js制作一個旋轉的正方體

相關推薦