在Three.js中给导入的3D模型重新设置中心点

最新推荐文章于 2024-04-27 20:09:33 发布

3D剁手

最新推荐文章于 2024-04-27 20:09:33 发布

阅读量1.4w

点赞数 3

文章标签： Three.js OBJ MTL Loader WebGL

本文链接：https://blog.csdn.net/qq_35750405/article/details/52076553

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - lights - physical lights</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 {
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px;
            width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
        }

        a {
            color: #ff0080;
            text-decoration: none;
        }

        a:hover {
            color: #0080ff;
        }
    </style>
</head>
<body>

<div id="container"></div>
<div id="info">
    <a href="http://threejs.org" target="_blank">three.js</a> - Physically accurate lighting example using a
    incandescent bulb - by <a href="http://clara.io" target="_blank">Ben Houston</a><br/>
    Using real world scale: Brick cube is 1 meter in size. Light is 2 meters from floor. Globe is 25 cm in
    diameter.<br/>
    Using Reinhard inline tonemapping with real-world light falloff (decay = 2).
</div>

<script src="../build/three.js"></script>
<script src="../examples/js/libs/stats.min.js"></script>
<script src="../examples/js/libs/dat.gui.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/controls/TransformControls.js"></script>

<script src="js/loaders/DDSLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>

<script>

    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var camera, scene, renderer,
            bulbLight, bulbMat, ambientLight,
            object, loader, stats;
    var ballMat, cubeMat, floorMat;

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    var intersects;
    var man2;
    var object;
    var boxMesh3, helper, transformControls;


    // ref for lumens: http://www.power-sure.com/lumens.htm
    var bulbLuminousPowers = {
        "110000 lm (1000W)": 110000,
        "3500 lm (300W)": 3500,
        "1700 lm (100W)": 1700,
        "800 lm (60W)": 800,
        "400 lm (40W)": 400,
        "180 lm (25W)": 180,
        "20 lm (4W)": 20,
        "Off": 0
    };

    // ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
    var hemiLuminousIrradiances = {
        "0.0001 lx (Moonless Night)": 0.0001,
        "0.002 lx (Night Airglow)": 0.002,
        "0.5 lx (Full Moon)": 0.5,
        "3.4 lx (City Twilight)": 3.4,
        "50 lx (Living Room)": 50,
        "100 lx (Very Overcast)": 100,
        "350 lx (Office Room)": 350,
        "400 lx (Sunrise/Sunset)": 400,
        "1000 lx (Overcast)": 1000,
        "18000 lx (Daylight)": 18000,
        "50000 lx (Direct Sun)": 50000,
    };

    var params = {
        shadows: true,
        exposure: 0.68,
        bulbPower: Object.keys(bulbLuminousPowers)[2],
        hemiIrradiance: Object.keys(hemiLuminousIrradiances)[4]
    };

    var clock = new THREE.Clock();

    init();
    animate();

    function init() {

        var container = document.getElementById('container');

        stats = new

最低0.47元/天解锁文章

3D剁手

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
在Three.js中给导入的3D模型重新设置中心点

最近尝试做一个基于Three.js的3D模型的网页在线查看器，支持以下功能1. 能够控制相机，旋转，拖拉缩放（OrbitControls)2. 能够移动导入的3D模型 (TransformControls)3. 相应的灯光和背景 4. 导入obj+mtl模型，并将中心点设置在模
复制链接

扫一扫