HTML 5 和 3.js 代码不会在网页上显示任何内容

HTML 5 and three.js code does not display anything on webpage

本文关键字：网页 显示 任何内 js 代码 HTML      更新时间：2023-09-26
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d cylinder</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="three.min.js" type="text/javascript"></script>
        <script src="Stats.js" type="text/javascript"></script>
        <script>
            var container, stats;
            var camera, scene, renderer;
            var cylinder;
            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;
            var mouseX = 0;
            var mouseXOnMouseDown = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            init();         
            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                var info = document.createElement( 'div' );
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';                
                container.appendChild( info );              
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.y = 150;
                camera.position.z = 500;
                scene = new THREE.Scene();
                // cylinder
                var materials = [];
                for ( var i = 0; i < 6; i ++ ) {
                    materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
                }
                cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), materials);
                    cylinder.overdraw = true;
                    scene.add(cylinder);
                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );   
                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
        </script>
    </body>
</html>

我正在尝试使用以下代码使用 HTML5 和 3.js绘制 3d 圆柱体。我正在使用画布渲染并在谷歌浏览器上对其进行测试。在控制台上，它正在摇摆"Three.CanvasRenderer 50"。可能是什么原因，这条消息是什么意思？

尝试以下"Hello world"示例之一：

mrdoob.com

你好世界

问题在于材料的初始化。看起来您正在尝试将多个材料映射到圆柱体上。也许您从多维数据集示例中获取了以下代码片段：

var materials = [];
for ( var i = 0; i < 6; i ++ ) {
    materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}

所讨论的"6"适用于立方体，但不适用于圆柱体。我不完全确定圆柱体的数组结构，但我假设 6 不是具有 2500 (50x50( 面创建的圆柱体的正确材料数量。您必须研究圆柱体材料格式。以下是关于 github 的讨论，可帮助您入门。

通过这样做：

cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 10, 10, false), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ));
cylinder.overdraw = true;
scene.add(cylinder);

你应该看到你的圆柱体。

请注意，您还应该将摄像机添加到场景中：

scene.add( camera );
相关文章：