Three.js官方案例webgl_materials_car学习

最新推荐文章于 2025-03-08 00:49:50 发布

hemy1989

最新推荐文章于 2025-03-08 00:49:50 发布

阅读量1.6k

点赞数 30

分类专栏： Three.js学习笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/hemiaoyuan1989/article/details/138916603

版权

1 安装VSCode ，并安装插件live-server

2 下载官方three.js到本地

3 学习案例webgl_materials_car

1 安装VSCode ，并安装插件live-server

找到后点击安装就行。

2 下载官方three.js到本地

本机搭建个Apache的服务器，把解压后的文件夹放到WWW文件夹下，运行本机服务器，就可以本地产看文档和运行案例了。

3 学习案例webgl_materials_car

创建一个文件夹StudyThreejs，把解压后的three.js-r163放到里面，找到文件webgl_materials_car.html进行学习。

3.1 car.html部分

用VSCode 打开文件夹StudyThreejs，先创建文件car.html和car.js

打开car.html：

style模块把main.css里的#info复制粘贴过来，这一部分是界面的文字和按钮的布局

去掉界面滚动条

3.2 body部分

注意：

这里一开始弄错了，修改后OK了。

3.3 car.html全部脚本

car.html如下,这一部分前度的知识我还是不太会哈

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>threejs car 学习</title>
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> -->
	<!-- <link type="text/css" rel="stylesheet" href="./three.js-r163/examples/main.css"> -->
    <style>
        body{
            color: #bbbbbb;
            background: #333333;
            overflow: hidden;  /*不用滚动条*/
            margin: 0px ;
        }
        a {
				color: #08f;
		}
        .colorPicker{
            display: inline-block;
            margin: 0 10px
        }
        /* 
         按钮和文字的布局
        */
        #info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

/* 添加这一行 几个颜色才能进行点击操作 */
input{
	pointer-events: auto;
}

</style>
 </head>

<body>
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> car materials<br/>
			Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
			<br><br>
            <span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span>
			<span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span>
			<span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span>
    </div>

    <div id="container"></div>

    <!-- <div id="webgl" style="margin-top: 0px; margin-left: 0px;">  </div> -->
    <!--z这个使得js里 引入three.js方便 好像使得和正式开发时写法一致 -->
    <script type="importmap">
        {
            "imports": {
                "three": "./three.js-r163/build/three.module.js",  
                "three/addons/":"./three.js-r163/examples/jsm/"  
            }
        }
    </script>
    <!-- 引入car.js -->
    <script type="module"  src="car.js">