three.js 树模型_与three.js的圣诞树

最新推荐文章于 2024-06-26 11:54:31 发布

cukengwei3786

最新推荐文章于 2024-06-26 11:54:31 发布

阅读量2.3k

点赞数

文章标签： webgl js vue javascript html5 ViewUI

原文链接：https://www.script-tutorials.com/christmas-tree-with-threejs/

版权

three.js 树模型

Christmas tree with three.js Today’s article refers to the Christmas and new year in the most direct manner. I prepared a remarkable and relevant demonstration of possibilities of three.js library in the form of an interactive Christmas card. This postcard has everything we need – the Christmas tree with toys, the star in the top, snow, snowflakes in the air – all to raise new year spirit of Christmas time. In this tutorial I will show you how to work with 3D scene, fog, cameras, textures, materials, basic objects (meshes), ground, lights, particles and so on.

带有three.js的圣诞树今天的文章以最直接的方式指圣诞节和新年。我以交互式圣诞贺卡的形式，对Three.js库的可能性进行了出色且相关的演示。这张明信片提供了我们所需的一切–玩具圣诞树，顶部的星星，雪，空中的雪花–所有这些都可以唤起圣诞节的新年精神。在本教程中，我将向您展示如何处理3D场景，雾，相机，纹理，材质，基本对象(网格)，地面，灯光，粒子等。

Our result works good for all modern browsers (using the HTML5 technology). To start, let’s look at the result and online demo:

我们的结果适用于所有现代浏览器(使用HTML5技术)。首先，让我们看一下结果和在线演示：

现场演示

First of all, I want to say a few words about three.js. Today’s lesson is the first where we use this library, which is really amazing, because it lets you get really good results with the minimum of effort. Almost all the necessary things for creating 3d scenes have already been implemented in this library, which harnesses the power of WebGL. I think that next year we will come back to WebGL more than once.

首先，我想谈谈three.js。今天的课程是我们第一个使用此库的课程，这确实很棒，因为它使您以最少的努力获得了非常好的结果。这个库利用WebGL的强大功能，几乎已经创建了创建3d场景所需的所有内容。我认为明年我们将不止一次回到WebGL。

Now, if you are ready to develop it – let’s start. In the beginning, create a blank html file (index.html) and put the following code:

现在，如果您准备开发它，那就开始吧。首先，创建一个空白的html文件(index.html)并输入以下代码：


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Christmas tree with three.js | Script Tutorials</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <!-- add scripts -->
        <script src="js/three.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Christmas tree with three.js | Script Tutorials</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <!-- add scripts -->
        <script src="js/three.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

Could it be simpler? Indeed, all you see is the basic HTML markup with few meta tags, and two javascript files, the first of which is the library itself (three.min.js), and the second file with the code of our Christmas card (script.js). Pay attention, that both javascript files are in the ‘js’ folder. Don’t forget to create this folder (‘js’) in the same folder where you saved your index.html file.

会更简单吗？实际上，您所看到的只是基本HTML标记，其中几乎没有meta标签，还有两个javascript文件，第一个是库本身(three.min.js)，第二个是带有我们圣诞贺卡代码的脚本(脚本)。 js)。请注意，两个javascript文件都在“ js”文件夹中。不要忘记在保存index.html文件的同一文件夹中创建此文件夹('js')。

Next step – you will need to download three.min.js library. You can find it in the Internet, and it is also available here. This file should be placed in the ‘js’ folder which you prepared earlier. Starting from the current moment we begin to understand the process of creation of all the scene elements. Now create a new blank javascript file, save it in the ‘js’ folder with the ‘script.js’ name. And let’s start from the beginning

下一步–您将需要下载three.min.js库。您可以在Internet上找到它，也可以在此处找到。该文件应放在您之前准备的“ js”文件夹中。从当前时刻开始，我们开始了解所有场景元素的创建过程。现在创建一个新的空白javascript文件，并将其保存为“ script.js”名称的“ js”文件夹。让我们从头开始

骨架 (Skeleton)

To begin, we define the global variables and the application skeleton

首先，我们定义全局变量和应用程序框架


var container;
var camera, scene, renderer, group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// initialize and start animation
init();
animate();
function init() {
}
function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    renderer.render(scene, camera);
}


var container;
var camera, scene, renderer, group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// initialize and start animation
init();
animate();
function init() {
}
function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    renderer.render(scene, camera);
}

This is fairly common structure of application built with t

最低0.47元/天解锁文章

cukengwei3786

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
three.js 树模型_与three.js的圣诞树

three.js 树模型Christmas tree with three.js Today’s article refers to the Christmas and new year in the most direct manner. I prepared a remarkable and relevant demonstration of possibilities of three.j...
复制链接

扫一扫