Image three.js设置背景图像_Image_Background_Static_Three.js_Set

Image three.js设置背景图像

image three.js

Image three.js设置背景图像,image,background,static,three.js,set,Image,Background,Static,Three.js,Set,如何创建静态背景图像对于默认背景： scene = new THREE.Scene(); // ... renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setClearColor( scene.fog.color, 1 ); 如何为场景设置图像。fog，或为clearcolor设置不透明度？如果试图设置静态背景图像（即使旋转主摄像机，背景也不会改变），则必须创建两个场景和两个摄像机。第一个场景将由

如何创建静态背景图像

对于默认背景：

scene = new THREE.Scene();

// ...

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );

如何为

场景设置图像。fog

，或为

clearcolor

设置不透明度？

如果试图设置静态背景图像（即使旋转主摄像机，背景也不会改变），则必须创建两个场景和两个摄像机。
第一个场景将由应用纹理的基本平面组成。
第二个场景将包含所有对象。
下面是一段代码：

<html>
    <body>

    <script src="Three.js"></script>
    <script>
        var color = 0x000000;

        // Create your main scene
        var scene = new THREE.Scene();

        // Create your main camera
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // Create lights
        var light = new THREE.PointLight(0xEEEEEE);
        light.position.set(20, 0, 20);
        scene.add(light);

        var lightAmb = new THREE.AmbientLight(0x777777);
        scene.add(lightAmb);

        // Create your renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create a cube
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            color: 0xff00ff,
            ambient: 0x121212,
            emissive: 0x121212
         });

        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Set up the main camera
        camera.position.z = 5;

        // Load the background texture
        var texture = THREE.ImageUtils.loadTexture( '1.jpg' );
        var backgroundMesh = new THREE.Mesh(
            new THREE.PlaneGeometry(2, 2, 0),
            new THREE.MeshBasicMaterial({
                map: texture
            }));

        backgroundMesh .material.depthTest = false;
        backgroundMesh .material.depthWrite = false;

        // Create your background scene
        var backgroundScene = new THREE.Scene();
        var backgroundCamera = new THREE.Camera();
        backgroundScene .add(backgroundCamera );
        backgroundScene .add(backgroundMesh );

        // Rendering function
        var render = function () {
            requestAnimationFrame(render);

            // Update the color to set
            if (color < 0xdddddd) color += 0x0000ff;

            // Update the cube color
            cube.material.color.setHex(color);

            // Update the cube rotations
            cube.rotation.x += 0.05;
            cube.rotation.y += 0.02;

            renderer.autoClear = false;
            renderer.clear();
            renderer.render(backgroundScene , backgroundCamera );
            renderer.render(scene, camera);
       };

       render();
   </script>
   </body>
</html>


var color=0x000000；
//创建主场景
var scene=new THREE.scene（）；
//创建主摄像机
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
//创建灯光
var灯=新的三点灯（0xEEEE）；
光位置设置（20,0,20）；
场景。添加（灯光）；
var lightAmb=新的三个环境光（0x777777）；
场景。添加（lightAmb）；
//创建渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//创建一个立方体
var geometry=新的3.BoxGeometry（1,1,1）；
var material=新的3.0网格LambertMaterial({
颜色：0xff00ff，
环境温度：0x121212，
发射：0x121212
});
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
//设置主摄像机
摄像机位置z=5；
//加载背景纹理
var-texture=THREE.ImageUtils.loadTexture（'1.jpg'）；
var backgroundMesh=新的三个网格(
新的三平面几何（2，2，0），
新的三网格基本材料({
贴图：纹理
}));
backgroundMesh.material.depthTest=假；
backgroundMesh.material.depthWrite=false；
//创建您的背景场景
var backgroundScene=new THREE.Scene（）；
var backgroundCamera=新的三个摄像头（）；
背景场景。添加（背景摄影机）；
backgroundScene.add（backgroundMesh）；
//渲染功能
var render=函数（）{
请求动画帧（渲染）；
//更新要设置的颜色
如果（颜色<0xDDDD）颜色+=0x0000ff；
//更新立方体颜色
立方体。材质。颜色。设置十六进制（颜色）；
//更新立方体旋转
立方体旋转x+=0.05；
立方体旋转y+=0.02；
renderer.autoClear=false；
.clear（）；
渲染器。渲染（背景场景、背景摄影机）；
渲染器。渲染（场景、摄影机）；
};
render（）；

希望这有帮助

注意（2014/06/28）：此代码适用于最新版本的Three.js:R67

谢谢）

我找到了另一个解决方案：

<!DOCTYPE html>
<head>
    <title>three.js webgl - orbit controls</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 {
            color: #000;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;
            background-image:url(./foto.jpg);

            margin: 0px;
            overflow: hidden;
        }

        #info {
            color:#000;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;

        }

        a {
            color: red;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="info">

        <a href="http://threejs.org" target="_blank">three.js</a> 
    </div>

    <script src="./three.min.js"></script>
    <script src="js/loaders/OBJLoader.js"></script>
    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <!--используем для вывода информации fps-->

    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, stats;
        var camera, controls, scene, renderer;
        var cross;

        init();
        animate();

        function init() {       

            camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 2000 );
            camera.position.z = 100;
            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );
            scene = new THREE.Scene();

            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };

            var texture = new THREE.Texture();
            var loader = new THREE.ImageLoader( manager );
            loader.load( './kos.jpg', function ( image ) {

                texture.image = image;
                texture.needsUpdate = true;

            } );

            // model

            var loader = new THREE.OBJLoader( manager );
            loader.load( './skull.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.map = texture;
                    }
                } );
                object.position.y = 10;
                scene.add( object );
            } );


            // lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0xffffff  );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0xffffff );
            scene.add( light );


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

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );
            window.addEventListener( 'resize', onWindowResize, false );
        }


        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            render();

        }

        function animate() {
            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );
            stats.update();
        }


    </script>

</body>


three.js webgl-动态观察控件
身体{
颜色：#000；
字体系列：Monospace；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
背景图片：url（./foto.jpg）；
边际：0px；
溢出：隐藏；
}
#信息{
颜色：#000；
位置：绝对位置；
顶部：0px；宽度：100%；
填充物：5px；
}
a{
颜色：红色；
}
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
摄像机、控件、场景、渲染器；
变量交叉；
init（）；
制作动画（）；
函数init（）{
摄像机=新的三视角摄像机（90，window.innerWidth/window.innerHeight，0.12000）；
摄像机位置z=100；
控制装置=新的三个控制装置（摄像机）；
控件。addEventListener（'change'，render）；
场景=新的三个。场景（）；
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var texture=new THREE.texture（）；
var loader=new THREE.ImageLoader（管理器）；
loader.load（'./kos.jpg'，函数（图）{
纹理.图像=图像；
texture.needsUpdate=true；
} );
//模型
var装入器=新的三个。对象装入器（管理器）；
loader.load（'./skull.obj'，函数（对象）{
遍历（函数（子对象）{
if（三个.Mesh的子实例）{
child.material.map=纹理；
}
} );
object.position.y=10；
场景。添加（对象）；
} );
//灯光
灯光=新的三个方向灯光（0xffffff）；
光。位置。设置（1，1，1）；
场景。添加（灯光）；
灯光=新的三个方向灯光（0xffffff）；
灯。位置。设置（-1，-1，-1）；
场景。添加（灯光）；
灯光=新的三个环境灯光（0xffffff）；
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer（{antialas:false}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
container=document.getElementById（'container'）；
container.appendChild（renderer.doElement）；
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domElement.style.top='0px'；
stats.domElement.style.zIndex=100；
容器附录C
scene = new THREE.Scene();
bgTexture = loader.load("https://i.stack.imgur.com/vDUZz.jpg",
    function ( texture ) {
        var img = texture.image;
        bgWidth= img.width;
        bgHeight = img.height;
        resize();
    } );
scene.background = bgTexture;
bgTexture.wrapS = THREE.MirroredRepeatWrapping;
bgTexture.wrapT = THREE.MirroredRepeatWrapping;

var aspect = window.innerWidth / window.innerHeight;
var texAspect = bgWidth / bgHeight;
var relAspect = aspect / texAspect;

bgTexture.repeat = new THREE.Vector2( 
    Math.max(relAspect, 1),
    Math.max(1/relAspect,1) ); 
bgTexture.offset = new THREE.Vector2(
    -Math.max(relAspect-1, 0)/2,
    -Math.max(1/relAspect-1, 0)/2 ); 

//Load background texture
const loader = new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });

    <head>
        <meta charset=utf-8>
        <title>Temple7</title>
        <style>
            body { margin: 0;
                 }
            canvas { width: 100%; height: 100%;
                  background-image:url(Clouds.jpg);
                }
        </style>
    </head>