【three.js】入門1 - 建立場景

時間 2019-11-10

原文原文鏈接

建立一個場景

本文的目的是簡單介紹一下three.js，咱們將會建立一個旋轉管道的場景。文章底部提供了一個可運行的案例以防初學者遇到問題須要幫助。javascript

建立以前

在你使用three.js以前，你須要先把下面的HTML文檔以及js目錄下的three.js保存在你的電腦裏。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

也就這麼點東西，你所須要作的就是把你的代碼寫在<script>標籤裏面。java

建立場景

實際上想要使用three.js，咱們所須要的也就是三個東西：scene（場景）、camera（攝像頭）、renderer（渲染器），而後咱們就能夠經過攝像頭來渲染場景了。canvas

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

首先咱們花多點時間解釋一下上面的代碼都是什麼意思。咱們如今建立了場景（scene）、攝像頭（camera）以及渲染器（renderer）。 three.js裏面有不少類型的攝像頭（camera）。咱們如今使用的是PerspectiveCamera。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。