三.js 设置背景图片 [英] three.js set background image

查看：40 发布时间：2021/12/31 18:27:25 image background static three.js set

本文介绍了三.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>

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 设置背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

三.js 设置背景图片 [英] three.js set background image

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

三.js 设置背景图片 [英] three.js set background image

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭