问题来源：
和导师交流后决定以这个来做毕业设计，于是就开始了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);
}
/* 相机 */
最低0.47元/天 解锁文章
4944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
