View 球体内的照相机_View_Camera_Three.js

View 球体内的照相机

view camera three.js

View 球体内的照相机,view,camera,three.js,View,Camera,Three.js,我想创建一个skydome，并制作了sphere，纹理加载也很好，但我无法在球体内移动相机。球体消失了。我知道这是一个业余问题，但看不到球的内部这是某种切割或Z缓冲区问题吗我怎样才能修好它我的代码： <html> <head> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/three.min.js"></script>

我想创建一个skydome，并制作了sphere，纹理加载也很好，但我无法在球体内移动相机。球体消失了。我知道这是一个业余问题，但看不到球的内部

这是某种切割或Z缓冲区问题吗

我怎样才能修好它

我的代码：

<html>
<head>
    <script src="js/jquery-1.8.3.min.js"></script>  
    <script src="js/three.min.js"></script>
</head>

<body>

    <div id="container">

    </div>


    <script>
        function addSpaceSphere( ){
            // set up the sphere vars
            var radius = 200,
            segments = 16,
            rings = 16;

            var material = new THREE.MeshPhongMaterial({
                color:0xFFFFFF,
                map: THREE.ImageUtils.loadTexture( 'textures/SPACE014SX.png' )
            });

            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(
                    radius,
                    segments,
                    rings
                ),
                material
            );


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

        function addLights(){
            // create a point light
            var ambient = new THREE.AmbientLight( 0xFFFFFF );
            scene.add( ambient );
        }
        function render() {
            camera.lookAt( focus );
            camera.updateProjectionMatrix();

            renderer.render( scene, camera );
        }
        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function createScene(){
            // add the camera to the scene
            scene.add(camera);

            // the camera starts at 0,0,0
            // so pull it back
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 300;

            // start the renderer
            renderer.setSize(WIDTH, HEIGHT);

            $container.append(renderer.domElement);

            addSpaceSphere( );

            addLights();

            animate();
        }

        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.01,
            FAR = 10000;

        var focus = new THREE.Vector3( 0, 0, 0 );


        var isUserInteracting = false,
            onPointerDownPointerX = 0, onPointerDownPointerY = 0,
            lon = 0, onPointerDownLon = 0,
            lat = 0, onPointerDownLat = 0,
            phi = 0, theta = 0;

        var $container = $('#container');

        // create a WebGL renderer, camera
        // and a scene
        //var renderer = new THREE.CanvasRenderer();
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE, ASPECT, NEAR, FAR
        );

        var scene = new THREE.Scene();

        createScene();      

    </script>
</body>


函数addSpaceSphere（）{
//设置球体变量
var半径=200，
分段=16，
环=16；
var材质=新的3.0网格材质({
颜色：0xFFFFFF，
map:THREE.ImageUtils.loadTexture（'textures/SPACE014SX.png'）
});
var sphere=新的三点网格(
新三点法(
半径
部分，
戒指
),
材料
);
//将球体添加到场景中
场景。添加（球体）；
}
函数addLights（）{
//创建点光源
var环境光=新的三个环境光（0xFFFFFF）；
场景。添加（环境光）；
}
函数render（）{
摄像机。注视（聚焦）；
camera.updateProjectMatrix（）；
渲染器。渲染（场景、摄影机）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数createScene（）{
//将摄影机添加到场景中
场景。添加（摄影机）；
//摄影机从0,0,0开始
//所以把它拉回来
摄像机位置x=0；
摄像机位置y=0；
摄像机位置z=300；
//启动渲染器
设置大小（宽度、高度）；
$container.append（renderer.domeElement）；
addSpaceSphere（）；
addLights（）；
制作动画（）；
}
变量宽度=window.innerWidth；
var HEIGHT=window.innerHeight；
var视图_角度=45，
纵横比=宽度/高度，
接近=0.01，
FAR=10000；
变量焦点=新的三个向量3（0,0,0）；
var isUserInteracting=false，
onPointerDownPointerX=0，onPointerDownPointerY=0，
lon=0，onPointerDownLon=0，
lat=0，onPointerDownLat=0，
φ=0，θ=0；
var$container=$（“#container”）；
//创建WebGL渲染器、摄影机
//还有一个场景
//var renderer=new THREE.CanvasRenderer（）；
var renderer=new THREE.WebGLRenderer（）；
var摄像机=新的三视角摄像机(
视角、方向、近距离、远距离
);
var scene=new THREE.scene（）；
createScene（）；

将skydome材质制作为双面材质--正在挑选。将“side”属性设置为3.DoubleSide

（或者三个。如果相机只在球体内部，背面也可以使用）

使skydome材质双面化——它正在被剔除。将“side”属性设置为3.DoubleSide

（或三个。如果相机仅在球体内部，则背面也可以使用）

渲染器。setFaceCulling（“front”，“ccw”）；--似乎解决了问题，但不确定这是否是正确的解决方案Renderer.setFaceCulling（“front”，“ccw”）；--似乎解决了问题，但不确定这是否是正确的解决方案