Javascript three.js脚本赢得'；行不通_Javascript_Three.js

Javascript three.js脚本赢得'；行不通

javascript three.js

Javascript three.js脚本赢得'；行不通,javascript,three.js,Javascript,Three.js,我正在读一本书“Learning Three.js-WebGL的JavaScript 3D库-第二版”，这是这本书中的第一个例子，它根本不起作用有人能告诉我怎么走吗？我试过了，但没用。但这些例子正发挥着应有的作用我提取了three.js，并将下面的示例放在three.js所在的构建文件夹中我是否需要本地web服务器来测试WebGL 现在我尝试用可视化代码进行调试和编码。还有其他建议吗 <html> <head> <title>Example 0

我正在读一本书“Learning Three.js-WebGL的JavaScript 3D库-第二版”，这是这本书中的第一个例子，它根本不起作用

有人能告诉我怎么走吗？我试过了，但没用。但这些例子正发挥着应有的作用

我提取了three.js，并将下面的示例放在three.js所在的构建文件夹中

我是否需要本地web服务器来测试WebGL

现在我尝试用可视化代码进行调试和编码。还有其他建议吗

<html>

<head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);

        // show axes in the screen
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // position the cube
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        // add the cube to the scene
        scene.add(cube);

        // create a sphere
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // render the scene
        renderer.render(scene, camera);
    }
    window.onload = init;

</script>
</body>
</html>


示例01.02-第一个场景
身体{
/*将边距设置为0，将溢出设置为隐藏，以全屏显示*/
保证金：0；
溢出：隐藏；
}
//加载所有内容后，我们将运行Three.js。
函数init（）{
//创建一个场景，该场景将包含所有元素，例如对象、摄影机和灯光。
var scene=new THREE.scene（）；
//创建一个摄像头，它定义了我们要看的地方。
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
//创建渲染并设置大小
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColorHex（）；
setClearColor（新的三种颜色（0xEEEE））；
renderer.setSize（window.innerWidth、window.innerHeight）；
//在屏幕上显示轴
var轴=新的三个.AxisHelper（20）；
场景。添加（轴）；
//创建地平面
var planeGeometry=新的三个平面几何体（60,20）；
var planeMaterial=新的3.MeshBasicMaterial（{color:0xCCCC}）；
var plane=新的三个网格（平面几何体、平面材质）；
//旋转并定位平面
plane.rotation.x=-0.5*Math.PI；
平面位置x=15；
平面位置y=0；
平面位置z=0；
//将平面添加到场景中
场景。添加（平面）；
//创建一个立方体
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshBasicMaterial（{color:0xff0000，线框：true}）；
var cube=新的三网格（立方计量法、立方材料）；
//定位立方体
cube.position.x=-4；
立方体位置y=3；
立方体位置z=0；
//将立方体添加到场景中
场景.添加（立方体）；
//创建一个球体
var比色法=新的三种比色法（4,20,20）；
var sphereMaterial=new THREE.MeshBasicMaterial（{颜色：0x7777ff，线框：true}）；
var sphere=新的三个网格（球面测量法、球面材料）；
//定位球体
球体位置x=20；
球体位置y=4；
球体位置z=2；
//将球体添加到场景中
场景。添加（球体）；
//将摄影机定位并指向场景的中心
camera.position.x=-30；
摄像机位置y=40；
摄像机位置z=30；
摄像机。注视（场景。位置）；
//将渲染器的输出添加到html元素
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
//渲染场景
渲染器。渲染（场景、摄影机）；
}
window.onload=init；

线路

renderer.setClearColorHex（）

应该删除

下面是使用JSFIDLE的新代码（使用来自网络的three.js）：


示例01.02-第一个场景
身体{
/*将边距设置为0，将溢出设置为隐藏，以全屏显示*/
保证金：0；
溢出：隐藏；
}
//加载所有内容后，我们将运行Three.js。
函数init（）{
//创建一个场景，该场景将包含所有元素，例如对象、摄影机和灯光。
var scene=new THREE.scene（）；
//创建一个摄像头，它定义了我们要看的地方。
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
//创建渲染并设置大小
var renderer=new THREE.WebGLRenderer（）；
//renderer.setClearColorHex（）；
setClearColor（新的三种颜色（0xEEEE））；
renderer.setSize（window.innerWidth、window.innerHeight）；
//在屏幕上显示轴
var轴=新的三个.AxisHelper（20）；
场景。添加（轴）；
//创建地平面
var planeGeometry=新的三个平面几何体（60,20）；
var PlaneMatterial=新的三网格基本材质({
颜色：0xCCCC
});
var plane=新的三个网格（平面几何体、平面材质）；
//旋转并定位平面
plane.rotation.x=-0.5*Math.PI；
平面位置x=15；
平面位置y=0；
平面位置z=0；
//将平面添加到场景中
场景。添加（平面）；
//创建一个立方体
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=新的3.MeshBasicMaterial({
颜色：0xff0000，
线框：正确
});
var cube=新的三网格（立方计量法、立方材料）；
//定位立方体
cube.position.x=-4；
立方体位置y=3；
立方体位置z=0；
//将立方体添加到场景中
场景.添加（立方体）；
//创建一个球体
var比色法=新的三种比色法（4,20,20）；
var sphereMaterial=新的三网格基本材质({
颜色：0x7777ff，
线框：正确
});
var sphere=新的三个网格（球面测量法、球面材料）；
//定位球体
球体位置x=20；
球体位置y=4；
球体位置z=2；
//将球体添加到场景中
场景。添加（球体）；
//将摄影机定位并指向场景的中心
camera.position.x=-30；
摄像机位置y=40；
卡梅尔
<html>

  <head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>
    <style>
      body {
        /* set margin to 0 and overflow to hidden, to go fullscreen */
        margin: 0;
        overflow: hidden;
      }

    </style>
  </head>

  <body>

    <!-- Div which will hold the Output -->
    <div id="WebGL-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
      // once everything is loaded, we run our Three.js stuff.
      function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        //renderer.setClearColorHex();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);

        // show axes in the screen
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({
          color: 0xcccccc
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshBasicMaterial({
          color: 0xff0000,
          wireframe: true
        });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // position the cube
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        // add the cube to the scene
        scene.add(cube);

        // create a sphere
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshBasicMaterial({
          color: 0x7777ff,
          wireframe: true
        });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // render the scene
        renderer.render(scene, camera);
      }
      window.onload = init;

    </script>
  </body>

</html>