clearcolor

clearcolor

关注
发信
关注(28)粉丝(399)

三.js 设置背景图片

本文介绍了三.js 设置背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何创建静态背景图片?

对于默认背景:

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

如何为scene.fog设置图像，或为clearcolor设置不透明度?

解决方案

谢谢 ))

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

<头><title>three.js webgl - 轨道控制</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><风格>身体 {颜色:#000；字体系列:等宽；字体大小:13px；文字对齐:居中；字体粗细:粗体；背景图片:网址(./foto.jpg)；边距:0px；溢出:隐藏；}#信息{颜色:#000；位置:绝对；顶部:0px；宽度:100%；填充:5px；}一个 {红色;}</风格><身体><div id="容器"></div><div id="信息"><a href="http://threejs.org" target="_blank">three.js</a>

<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--><脚本>if (!Detector.webgl) Detector.addGetWebGLMessage();var 容器，统计数据；var 相机、控件、场景、渲染器；无功十字架;在里面();动画()；函数初始化(){camera = new THREE.PerspectiveCamera( 90, window.innerWidth/window.innerHeight, 0.1, 2000 );相机.位置.z = 100;控件 = 新的 THREE.OrbitControls(camera);control.addEventListener('更改', 渲染);场景 = 新的 THREE.Scene();var manager = new THREE.LoadingManager();manager.onProgress = 函数(项目，已加载，总计){控制台日志(项目，已加载，总计)；};var 纹理 = 新的 THREE.Texture();var loader = new THREE.ImageLoader( manager );loader.load( './kos.jpg', 函数 ( 图像 ) {纹理.图像 = 图像；纹理.needsUpdate = true;});//模型var loader = new THREE.OBJLoader( manager );loader.load('./skull.obj', 函数(对象){object.traverse(函数(子){如果(子实例THREE.Mesh){child.material.map = 纹理；}});object.position.y = 10;场景添加(对象)；});//灯光 = 新的 THREE.DirectionalLight(0xffffff);light.position.set( 1, 1, 1 );场景添加(光)；光 = 新的 THREE.DirectionalLight(0xffffff);light.position.set( -1, -1, -1 );场景添加(光)；光 = 新的 THREE.AmbientLight(0xffffff);场景添加(光)；renderer = new THREE.WebGLRenderer( { antialias: false } );renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);容器 = document.getElementById('容器');container.appendChild(renderer.domElement);统计=新统计()；stats.domElement.style.position = '绝对';stats.domElement.style.top = '0px';stats.domElement.style.zIndex = 100;container.appendChild(stats.domElement);window.addEventListener('resize', onWindowResize, false );}函数 onWindowResize() {camera.aspect = window.innerWidth/window.innerHeight;相机.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );使成为();}函数动画(){requestAnimationFrame( 动画 );控制更新()；}函数渲染(){renderer.render(场景，相机)；stats.update();}

How to create a static background image?

For default background:

scene = new THREE.Scene();

// ...

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

How to set a image for scene.fog, or set opacity for clearcolor?

解决方案

thank you ))

I found yet another solution:

<!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>

这篇关于三.js 设置背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 23:34
Powered by LMLPHP ©2024 clearcolor 0.052019