three.js设置背景图片
use*_*890 14 static background image set three.js
如何创建静态背景图像？
对于默认背景:
scene = new THREE.Scene();
// ...
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
如何设置图像scene.fog,或设置不透明度clearcolor？
Thi*_*rta 24
如果您尝试设置静态背景图像(即使您旋转主摄像头,背景也不会改变),您必须创建2个场景和2个摄像头.
第一个场景将由应用纹理的基本平面组成.
第二个场景将包含所有对象.
这是一个可以执行此操作的代码:
<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>
希望这可以帮助.
NOTE(2014/06/28):此代码适用于最新版本的Three.js:R67
Hit*_*ahu 11
使用 Texture loader 将任何图像加载为纹理，然后将其应用到场景中，如下所示：
//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;
});
结果：
演示：
请参阅CodePen 上Hitesh Sahu ( @hiteshsahu )的 Pen Flat Earth Three.JS。可以通过设置scene.background的属性来设置背景图像THREE.Scene：
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 );
看代码片段：
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 );
小智 5
这次运行:
renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000, 0);
- 这是一种简单的方法，然后当然可以将`{background-image：url（'whatever.jpg'）}`CSS到您的canvas元素或其容器上。 (2认同)
谢谢 ））
\n\n我找到了另一个解决方案：
\n\n<!DOCTYPE html>\n<head>\n <title>three.js webgl - orbit controls</title>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">\n <style>\n body {\n color: #000;\n font-family:Monospace;\n font-size:13px;\n text-align:center;\n font-weight: bold;\n background-image:url(./foto.jpg);\n\n margin: 0px;\n overflow: hidden;\n }\n\n #info {\n color:#000;\n position: absolute;\n top: 0px; width: 100%;\n padding: 5px;\n\n }\n\n a {\n color: red;\n }\n </style>\n</head>\n\n<body>\n <div id="container"></div>\n <div id="info">\n\n <a href="http://threejs.org" target="_blank">three.js</a> \n </div>\n\n <script src="./three.min.js"></script>\n <script src="js/loaders/OBJLoader.js"></script>\n <script src="js/controls/OrbitControls.js"></script>\n\n <script src="js/Detector.js"></script>\n <script src="js/libs/stats.min.js"></script>\n <!--\xd0\xb8\xd1\x81\xd0\xbf\xd0\xbe\xd0\xbb\xd1\x8c\xd0\xb7\xd1\x83\xd0\xb5\xd0\xbc \xd0\xb4\xd0\xbb\xd1\x8f \xd0\xb2\xd1\x8b\xd0\xb2\xd0\xbe\xd0\xb4\xd0\xb0 \xd0\xb8\xd0\xbd\xd1\x84\xd0\xbe\xd1\x80\xd0\xbc\xd0\xb0\xd1\x86\xd0\xb8\xd0\xb8 fps-->\n\n <script>\n if ( ! Detector.webgl ) Detector.addGetWebGLMessage();\n var container, stats;\n var camera, controls, scene, renderer;\n var cross;\n\n init();\n animate();\n\n function init() { \n\n camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 2000 );\n camera.position.z = 100;\n controls = new THREE.OrbitControls( camera );\n controls.addEventListener( \'change\', render );\n scene = new THREE.Scene();\n\n var manager = new THREE.LoadingManager();\n manager.onProgress = function ( item, loaded, total ) {\n\n console.log( item, loaded, total );\n\n };\n\n var texture = new THREE.Texture();\n var loader = new THREE.ImageLoader( manager );\n loader.load( \'./kos.jpg\', function ( image ) {\n\n texture.image = image;\n texture.needsUpdate = true;\n\n } );\n\n // model\n\n var loader = new THREE.OBJLoader( manager );\n loader.load( \'./skull.obj\', function ( object ) {\n object.traverse( function ( child ) {\n if ( child instanceof THREE.Mesh ) {\n child.material.map = texture;\n }\n } );\n object.position.y = 10;\n scene.add( object );\n } );\n\n\n // lights\n\n light = new THREE.DirectionalLight( 0xffffff );\n light.position.set( 1, 1, 1 );\n scene.add( light );\n\n light = new THREE.DirectionalLight( 0xffffff );\n light.position.set( -1, -1, -1 );\n scene.add( light );\n\n light = new THREE.AmbientLight( 0xffffff );\n scene.add( light );\n\n\n renderer = new THREE.WebGLRenderer( { antialias: false } );\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n container = document.getElementById( \'container\' );\n container.appendChild( renderer.domElement );\n stats = new Stats();\n stats.domElement.style.position = \'absolute\';\n stats.domElement.style.top = \'0px\';\n stats.domElement.style.zIndex = 100;\n container.appendChild( stats.domElement );\n window.addEventListener( \'resize\', onWindowResize, false );\n }\n\n\n function onWindowResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize( window.innerWidth, window.innerHeight );\n render();\n\n }\n\n function animate() {\n requestAnimationFrame( animate );\n controls.update();\n\n }\n\n function render() {\n\n renderer.render( scene, camera );\n stats.update();\n }\n\n\n </script>\n\n</body>\n| 归档时间： |
|
| 查看次数： |
33438 次 |
| 最近记录： |