Question

我一直在关注three.js的一些介绍性教程，并且无法看到我在CSS中添加的红色背景，但没有我建立的three.js我自己在Atom Chrome（版本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中的建议尝试按照本地服务器运行，但我没有运气。当我View Page Source Chrome时，包含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>

Answer 1

与<head>：

中不包含此内容相关的错误

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

我没有在其他教程中通过此链接来访问，因此在录制之前要么已经下载了，或者因为我仍然是three.js的新手并且可能缺少更多技术答案，所以它可用教程中的其他地方，我错过了它。

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

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

1 个答案: