Three.JS 动画未在 Chrome v61 Mac OS X Sierra 上显示答案

【问题标题】：Three.JS animation not showing on Chrome v61 Mac OS X SierraThree.JS 动画未在 Chrome v61 Mac OS X Sierra 上显示
【发布时间】：2018-04-17 14:52:30
【问题描述】：

我一直在关注three.js 的一些介绍性教程，并且无法通过看到我在 CSS 中添加的红色背景，但是我在 Atom 上自行构建的 three.js 没有987654326@（版本 62.0.3202.75（官方版本）（64 位））、Mac OS X（macOS Sierra、Intel Iris Plus Graphics 640 1536 MB）。当我从教程下载完全相同的代码并运行它Downloads>threes_js_basic>index.html 时，我可以看到预期的输出。但是当我在本地服务器上复制/粘贴并运行它时，我看到的只是我在CSS 中添加的红色背景。

按照Google-chrome can't locally view my webGL Three.js webpages in Ubuntu 中的建议，我尝试通过本地服务器运行它，但我没有任何运气。当我在Chrome 中View Page Source 时，包含three.js 的代码清晰可见。

我启用了WebGL，甚至安装了一个允许跨域资源共享的扩展。

下面的代码是教程的直接副本 - 我下载了源代码并复制/粘贴到 Atom 中。 https://www.youtube.com/watch?v=biZgx45Mzqo&t=71s

<html>
<head>
<title>threejs - basic</title>
<style>
    body{
        margin: 0;
        overflow: hidden;
    }

    canvas{
        background: red;
    }

</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<script src="three.js"></script>
<script>

    //RENDERER
    var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
    renderer.setClearColor(0x00ff00);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    //CAMERA
    var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
    // var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 3000);

    //SCENE
    var scene = new THREE.Scene();

    //LIGHTS
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    var light1 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light1);

    //OBJECT
    var geometry = new THREE.CubeGeometry(100, 100, 100);
    var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);


    //RENDER LOOP
    requestAnimationFrame(render);

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
</script>

【问题讨论】：

控制台没有错误？

标签： javascript css html google-chrome three.js

【解决方案1】：

与在<head> 中不包含此相关的错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

我在其他教程中没有通过此链接获得此链接，因此它要么是在录制之前下载的，要么由于我还是 three.js 的新手并且可能缺少更多技术答案，因此可以在教程的其他地方找到它我错过了。

感谢 @2pha 提示我检查控制台 - 我不知道我可以在 Chrome 中执行此操作。干杯！

【讨论】：