如何将 Threejs 对象放在 div 中居中？

Question

我有这个 JS 代码，我试图将我的对象放在我网站的 div 中。但是我无法做到这一点。我已经尝试过发布的解决方案，但它们不起作用。我感谢你的帮助。

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';

// Scene 1 - Landing Page 

container = document.getElementById('canvas');
document.body.appendChild( container );


const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

container.appendChild( renderer.domElement );

const div = document.getElementById('container');
div.appendChild(renderer.domElement);

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( div.clientWidth, div.clientHeight,false);

const scene = new THREE.Scene();

const clock = new THREE.Clock();

const camera = new THREE.PerspectiveCamera(
    50,
    div.clientWidth / div.clientHeight,
    0.1,
    1000
);


const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.x = 0
camera.position.y = 2
camera.position.z = 6
orbit.enabled = false
orbit.minDistance = 7;
orbit.maxDistance = 7;
orbit.update();

const gltfLoader = new GLTFLoader();

const rgbeLoader = new RGBELoader();

renderer.linearEncoding = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 10;

let obj1;
rgbeLoader.load('./assets/MR_INT-005_WhiteNeons_NAD.hdr', function(texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
    scene.background = null;


    gltfLoader.load( './assets/scene.gltf', function ( gltf ) {

        model = gltf.scene;
        scene.add(model);

        var textureLoader = new THREE.TextureLoader();
        textureLoader.load( "./textures/material0_baseColor.png", function ( map ) {
        model.material.map = map;
        model.material.map.encoding = THREE.sRGBEncoding;
        model.material.map.flipY = false;
        model.material.needsUpdate = true;
        });
    
        mixer = new THREE.AnimationMixer( model );
        
        gltf.animations.forEach( ( clip ) => {
          
            mixer.clipAction( clip ).play();
            obj1 = model;
        } );
    });

function animate(time) {
    requestAnimationFrame( animate );
    if (mixer) 
        delta = clock.getDelta();
        mixer.update(delta);
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener('resize', function() {
    camera.aspect = div.clientWidth / div.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( div.clientWidth, div.clientHeight,false);
});


});

这是我的html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css"> 
</head>
<body>
    <div id="container">
        <div id="canvas"></div>
    </div>
    <div id="container2">
        <h1>
            <span class="box"></span><span class="text"></span><span class="cursor">_</span>
        </h1>
    </div>

    <script src="./js/scripts.js" type="module"></script>
    <script src="./js/app.js" type="module"></script>
    <!--
        npm install @parcel/config-default -d
        
        "staticFiles": {
    "staticOutPath": "static"
    }
    -->
</body>
<script src="./js/scripts.js" type="module"></script>
<script src="./js/app.js" type="module"></script>
</html>

和 CSS 文件。

@import url('https://fonts.cdnfonts.com/css/modern-typewriter');
html {
  background-color: black;
  scroll-behavior: smooth;
  }
  
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

#container{
  background-color: blue;
  float: right;
  width: 500;
  height: 500;
}

h1 {
  position: relative;
  font-size: 2vw;
  font-weight: bold;
  padding-top: 20vw;
  padding-left: 5vw;
  overflow: hidden;
  color: aliceblue;
}

h1 .text {
  font-family: 'MODERN TYPEWRITER', sans-serif;
  font-weight: normal;
}

#container2{
  float: left;
  width: 50%;
}

这就是我需要的样子。

我尝试修复相机位置和 CSS 脚本，但不起作用。

Answer 1

最后...这个方法很简单。只需将它们嵌套（放入）容器 div 中即可。

#leftbox {
        float: left;
        background: Red;
        width: 25%;
        height: 280px;
    }

    #middlebox {
        float: left;
        background: Green;
        width: 50%;
        height: 280px;
    }

    #rightbox {
        float: right;
        background: blue;
        width: 25%;
        height: 280px;
    }

摘自：geekforgeeks

如何将 Threejs 对象放在 div 中居中？

问题描述投票：0回答：1

1个回答

最新问题

如何将 Threejs 对象放在 div 中居中？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1