three.js实现一个汽车3D实景（颜色交互）

最新推荐文章于 2025-05-27 17:11:53 发布

现在学习亦不晚

最新推荐文章于 2025-05-27 17:11:53 发布

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js 文章标签： three.js 3D 颜色交互

本文链接：https://blog.csdn.net/zp1156/article/details/88290417

本文介绍了作者使用three.js库进行3D建模，特别是创建了一个汽车模型并实现了颜色交互功能。通过半个多月的学习，作者完成了初步的成果展示，并附上了网页显示的截图。尽管在美工方面还有待提升，但希望能从社区得到反馈和建议。文中还分享了在学习过程中遇到的问题以及推荐的3D学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题来源：
和导师交流后决定以这个来做毕业设计，于是就开始了three.js的学习，经过半个多月的基础学习，终于入门，下面来看看成果。

代码演示：
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D（颜色交互）</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="three.js/build/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="three.js/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
<div id="contorl">
    <input class="color" type="color">
</div>
<script src="js/model.js"></script>
</body>
</html>

model.css

body {
    margin: 0 ;
	padding: 0 ;
    overflow: hidden; /* 溢出隐藏 */
}
#contorl{
    position: absolute;
    width: 15%;
    height: 20%;
    right: 20px;
    top: 20px;
    background-color: white;
}
.select{
    font-family: "微软雅黑";
    background: rgba(0,0,0,0);
    width: 70%;
    height: 30%;
    font-size: 12px;
    color: black;
    text-align: center;
    border: 1px #1a1a1a solid;
    border-radius: 5px;
}
.select > option{
    color: black;
    background: #fff;
    line-height: 20px;
}
.select:focus{
    border: 2px #0000ff solid;
    box-shadow: 0 0 15px 1px #DDDDDD;
}
.select > option:hover{
    background: #EBCCD1;
}
.color{
    border: none;
    outline: none;
}
::-webkit-color-swatch-wrapper{background-color:#ffffff;}
::-webkit-color-swatch{position: relative;}

model.js(此处才是重点)

 let scene, camera, renderer, controls, guiControls;
    // let stats = initStats();

    /* 场景 */
    function initScene() {

        scene = new THREE.Scene();
        var skySphereGeometry = new THREE.SphereGeometry( 500, 30, 100 );
        var texture = new THREE.TextureLoader().load("images/timg.jpg");
        var skySphereMaterial = new THREE.MeshBasicMaterial( { map:texture, side: THREE.DoubleSide } );
        var skySphere = new THREE.Mesh( skySphereGeometry, skySphereMaterial );
        scene.add(skySphere);

    }

    /* 相机 */
    function initCamera() {

        camera