Three.js：第一次安装。。。？_Three.js

Three.js：第一次安装。。。？

three.js

Three.js：第一次安装。。。？,three.js,Three.js,谁能解释一下如何一步一步地安装三个js并开始呢。“开始”之前的步骤我已经下载了“three.js master.zip”，但我无法确定以下部分： “在使用three.js之前，您需要在某个地方显示它。将以下HTML与js/目录中的three.js副本一起保存到计算机上的文件中，并在浏览器中打开它“ 在哪里粘贴请像你们在儿童课上一样解释，因为到目前为止，我所做的一切都没有得到视觉反馈。前下载three.js.master 创建一个文件夹并在其中解压上一个zip 创建一个文本文档，将其命名为

谁能解释一下如何一步一步地安装三个js并开始呢。“开始”之前的步骤

我已经下载了“three.js master.zip”，但我无法确定以下部分：

“在使用three.js之前，您需要在某个地方显示它。将以下HTML与js/目录中的three.js副本一起保存到计算机上的文件中，并在浏览器中打开它“

在哪里粘贴请像你们在儿童课上一样解释，因为到目前为止，我所做的一切都没有得到视觉反馈。前

下载three.js.master

创建一个文件夹并在其中解压上一个zip

创建一个文本文档，将其命名为“thisNAme”并保存

将其扩展名更改为html

复制粘贴此代码。 6

在您喜欢的任何位置创建项目文件夹。
例如：C:\Users\yourname\simple threejs setup（如果您使用Windows）

在我的示例中，在项目文件夹中创建另一个名为js的文件夹：C:\Users\yourname\simple threejs setup\js

下载（右键单击，然后“下载链接为…”）。将其保存在js文件夹（C:…\simple threejs setup\js）中。

在您的项目文件夹中创建一个新的文件，并随意命名，但将扩展名改为.html
我将其命名为spining-cube.html

右键单击文件并选择“打开方式…”，然后选择您最喜欢的文本编辑器

在THREE.js文档中粘贴来自的内容。
注意

标记。这指向您在上一步中下载的THREE.js库。源代码摘录如下：

旋转立方体。html:

<html>
    <head>
        <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>
            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 );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>


我的前三个.js应用程序
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var render=函数（）{
请求动画帧（渲染）；
立方体旋转.x+=0.1；
立方体旋转y+=0.1；
渲染器。渲染（场景、摄影机）；
};
render（）；

保存并关闭文件

双击spining-cube.html以在默认浏览器中打开它。
默认情况下，html文件将在默认浏览器中打开。但是，如果您已更改此行为，则可以打开首选浏览器，然后只需将文件拖放到其中