时间戳

首页 > 解决方案 > 低比例模型不在 THREE.js 中绘制

javascript - 低比例模型不在 THREE.js 中绘制

问题描述

我用这段代码画了一个球体

function sphere(cena,x,y,z,radius,colorr)
  {
    var sphereGeometry = new THREE.SphereGeometry( radius, 10, 10);

    var materiall = new THREE.MeshBasicMaterial( { color: colorr , side: THREE.DoubleSide} );


    var cir = new THREE.Mesh( sphereGeometry, materiall ) 

    cir.position.x=x;
    cir.position.y=y;
    cir.position.z=z;

    cena.add( cir );

    return cir ;    
  }

现在我正在绘制一个半径为 10^(-6) 的球体

var um=Math.pow(10,-6);
sphere(scene,0,0,0,um*3.5,'green')

什么都没有画出来。um*30 也是如此。仅从 um*300 开始出现球体。附近的相机设置为 0.000001

我需要那个秤，怎么办？

顺便说一句，线条画得很好

标签： javascriptthree.js

解决方案

这取决于您如何放置相机。试试这个代码：

var camera, scene, renderer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.000001, 1 );

    scene = new THREE.Scene();

    var um = Math.pow( 10, - 6 );
    camera.position.z = um * 10;
		
    var mesh = sphere( scene, 0, 0, 0, um * 3.5 , 'green' );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

function sphere(cena,x,y,z,radius,colorr) {

    var sphereGeometry = new THREE.SphereBufferGeometry( radius, 10, 10);

    var materiall = new THREE.MeshBasicMaterial( { color: colorr , side: THREE.DoubleSide} );


    var cir = new THREE.Mesh( sphereGeometry, materiall );

    cir.position.x=x;
    cir.position.y=y;
    cir.position.z=z;

    cena.add( cir );

    return cir;    
	
}
<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>

推荐阅读