在HTML中对Three.js库的简单尝试

最新推荐文章于 2024-05-27 23:00:00 发布

喵喵的柠檬汁

最新推荐文章于 2024-05-27 23:00:00 发布

阅读量1.8k

点赞数 47

文章标签： javascript

本文链接：https://blog.csdn.net/m0_60908355/article/details/137940421

版权

一.杂谈

搞前端嘛，我想不是那种作业式的或者是什么有着极强的高水准追求，我相信大家大概率也是想搞一个类似一个个人博客，博客功能内容齐全，看起来又有很多🐂🍺效果的各种交互。我也是其中一个，显然那种看起来非常不错的网页会很吸引我们，时不时电脑里文件夹就会长一些从外面下载的网页。（说实话，随着互联网的发展，前端也逐渐趋于成熟和模式化，现在网上也有很多网页制作网站（现在也有中文的了，那会儿看清一色的英文），帮助有梦没能力的人做出自己心目中的网页，而网上也有很多傻瓜式的教材手把手教你，为什么说这个呢，因为我觉得如果你只是想做个个人网页博客，没必要过于深度了解，因为网页设计这东西，其实也要有一点的审美，不然有时候做出来就是怎么看怎么不顺眼，做出来后看到别的网页又觉得自己搞得不太行，还能改，哎再改，哟，怎么越改越不顺眼了。。。不过想要对网页动动手动动脑你的小脑袋瓜还是要对这三大件有个了解，至少得看懂吧。。。）

二.灵光一闪

这个东西嘛，就是一开始突然之间有个想法，能不能画个地球仪，地球仪以网格化的形式展现，而且使用浏览器获取地址，在地球仪是标亮位置，单个地球仪又太单调了，不如再加个太阳和月亮，以3D的形式呈现在网页中，表现此时此刻所在的时间地点。

当然这个东西想法很美好，现实很残酷，定位的位置需要投影在地球上，而且这个地球模型的位置和定位位置关系的确定也在我的知识盲区（我猜实现可能需要使用百度地图的api接口，对地球模型改成符合接口的样式之类的），所以最后搞出的也就是一个简单的模拟太阳系，就是只有太阳，地球，月亮（按正常时间进行模拟行星运动过程这显然不现实）。

三.具体实现

想要实现3D效果以及光影效果，这就需要使用Javascript的第三方库——Three.js。而Three.js 又是基于 WebGL创建的，（如果你有幸学习了python这种简单引用第三方库的语言，并且大学学习了计算机图形学，甚至学c++的opengl，那你一定不陌生，当然啦😅，祝你不是令人头大计算机科学与技术系的一员）在WebGL中也和opengl一样，提供创建几何体和材质，相机和视角控制，光源和阴影效果，动画和交互，加载外部模型和纹理等功能。

这是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Solar System</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

可以看到，HTML中引用了一个本地js文件和一个网络上的第三方js文件，这个第三方three.js的引用位置就是"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"

这是css的代码

body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #666666, #333333);
}
canvas {
    display: block;
}

这是javascript的代码（用了人工智障来注释，真就全部注释一遍，也不说明各个参数功能，不过至少降低了一些工作量。。。）

// 创建场景对象（场景是包含所有 3D 对象的容器。）
var scene = new THREE.Scene();

// 创建透视摄像机对象（创建了一个透视摄像机对象。参数分别是视场角（单位是度），宽高比，近剪切面和远剪切面。这个摄像机将用于渲染场景。）
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建 WebGL 渲染器对象（这个渲染器将渲染 Three.js 场景。）
var renderer = new THREE.WebGLRenderer();

// 设置渲染器大小（大小为当前窗口的大小。）
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的 DOM 元素添加到文档中
document.body.appendChild(renderer.domElement);

// 创建太阳的几何体对象（创建了一个球体几何体对象，表示太阳。参数分别是球体的半径、水平和垂直分段数。）
var sunGeometry = new THREE.SphereGeometry(10, 32, 32);

// 创建太阳的基础材质对象
var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffddaa });

// 创建太阳的网格对象（创建了一个网格对象，将球体几何体和基础材质结合起来，表示太阳。）
var sun = new THREE.Mesh(sunGeometry, sunMaterial);

// 将太阳添加到场景中
scene.add(sun);

// 创建点光源对象表示太阳（参数分别是颜色和光照强度。）
var light = new THREE.PointLight(0xffddaa, 1);

// 设置光源的位置为原点
light.position.set(0, 0, 0);

// 将光源添加到场景中
scene.add(light);

// 创建地球的几何体对象
var earthGeometry = new THREE.SphereGeometry(5, 32, 32);

// 创建地球的基础材质对象
var earthMaterial = new THREE.MeshBasicMaterial({ color: 0x2233ff });

// 创建地球的网格对象
var earth = new THREE.Mesh(earthGeometry, earthMaterial);

// 将地球添加到场景中
scene.add(earth);

// 创建月球的几何体对象
var moonGeometry = new THREE.SphereGeometry(2, 32, 32);

// 创建月球的基础材质对象
var moonMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });

// 创建月球的网格对象
var moon = new THREE.Mesh(moonGeometry, moonMaterial);

// 将月球添加到地球的位置
earth.add(moon);

// 定义动画函数（定义了一个动画函数。这个函数使用 requestAnimationFrame() 方法递归地更新动画，并在每一帧中旋转地球和月球，然后渲染场景。）
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 地球和月球绕太阳自转
    earth.rotation.y += 0.01;
    moon.rotation.y += 0.02;

    // 渲染场景
    renderer.render(scene, camera);
}

// 调用动画函数开始动画循环
animate();

// 监听鼠标移动事件
document.addEventListener('mousemove', function(event) {
    // 根据鼠标位置改变摄像机位置，实现视角改变
    camera.position.x = event.clientX - window.innerWidth / 2;
    camera.position.y = event.clientY - window.innerHeight / 2;
});

// 监听滚轮事件
document.addEventListener('wheel', function(event) {
    // 根据滚动方向改变摄像机位置，实现缩放效果
    camera.position.z += event.deltaY * 0.1;
});

// 开始动画（调用 animate() 函数开始动画循环。）
animate();

其中，比较关键的函数是THREE.SphereGeometry和THREE.MeshBasicMaterial（），前者是3D的几何属性，后者是基础材质，后者函数所接受的参数包含定义材质的各种属性，如color，map（材质），transparent等。

四.结语

其实，通过中文名就知道html（超文本标记语言），css（层叠样式表），javascript（客户端脚本语言）这三个部分负责的对象，在想要实现复杂功能的时候就要使用javascript引入第三方库，用脚本实现你想要的效果，而这些第三方库想要使用好，那必然还是离不开他们的使用文档，当然无论是中文还是英文，跟着案例理解是最好的。

最后，希望大家都有良好精神状态，作为一个三无大学生，面临大四压力以及未来人生道路的选择，还是感觉充满压力的。到现在还不拼死一搏，说不定未来还不会后悔，毕竟就算我是郭敬明，我也能跳起来也顶烂压在我头上的破膝盖，拜托，我精神状态超好的😀，我凭什么不能去追寻我想要的人生，追寻这种事什么时候都不算太晚，对吧。

喵喵的柠檬汁

关注

47
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
在HTML中对Three.js库的简单尝试

其实，通过中文名就知道html（超文本标记语言），css（层叠样式表），javascript（客户端脚本语言）这三个部分负责的对象，在想要实现复杂功能的时候就要使用javascript引入第三方库，用脚本实现你想要的效果，而这些第三方库想要使用好，那必然还是离不开他们的使用文档，当然无论是中文还是英文，跟着案例理解是最好的。最后，希望大家都有良好精神状态，作为一个三无大学生，面临大四压力以及未来人生道路的选择，还是感觉充满压力的。
复制链接

扫一扫