js面向对象创建dom对象_创建三个js对象轮

js面向对象创建dom对象

Circles, squares, spheres, cubes, custom geometry…we’ll use circles to create an image carousel.

圆，正方形，球体，立方体，自定义几何形状...我们将使用圆来创建图像轮播。

本教程要求您在实时服务器上运行页面。 (This tutorial requires that you run your page on a live server.)

You can create a local server yourself using NodeJS/Express or use a third-party extension in your favorite text editor.

您可以使用NodeJS / Express自己创建本地服务器，也可以在喜欢的文本编辑器中使用第三方扩展。

I use Visual Studio Code and as such, use the Live Server extension; ‘Extension Id: ritwickdey.liveserver’.

我使用Visual Studio Code ，因此使用Live Server扩展。 ' 扩展名：ritwickdey.liveserver '。

让我们开始。 (Let’s begin.)

We’ll start by downloading the THREE.JS library.

我们将从下载THREE.JS库开始。

You can find the files here:

您可以在这里找到文件：

https://github.com/mrdoob/three.js/archive/master.zip

https://github.com/mrdoob/three.js/archive/master.zip

All you need is the ‘three.js’ file in the ‘/build’ folder.After you’ve done so, make sure to include it in your ‘index.html’

您只需要在/ build文件夹中的three.js文件。完成之后，请确保将其包含在index.html中 。

<script src="./three.js"></script>

While we’re setting up our html, we’ll normalize our page and center the canvas our carousel will be placed on with a bit of CSS.

在设置html时，我们将规范化页面，并用一些CSS将放置在轮播上的画布居中对齐。

<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

让我们开始构建轮播。 (Let’s start building the carousel.)

First things first, let’s get some general variables we’ll be needing out of the way.

首先，让我们获取一些我们需要的常规变量。

const image_radius = 100;
const number_of_images = 8;
const radius = 400;
const radian_interval = (2.0 * Math.PI) / number_of_images;
const center_of_wheel = {
                            x: 0,
                            y: 0
                        }

Note:1. image_radius — the radius of our image, keep in mind ‘diameter’ or width of our circle will be double this2. number_of_images — number of images/objects we want in our circle3. radius — the radius of our entire wheel (how we “space out” ALL of the images from the center)4. radian_interval — where each image/object falls in our circle; currently at 45 degree increments5. center_of_wheel — geometrically(in space), the center of our circle

注意： 1. image_radius-图片的半径，请记住“直径”，否则我们的圆的宽度将是this2的两倍。 number_of_images —我们圈子中想要的图像/对象数3。 radius-整个轮子的半径(我们如何从中心“间隔”所有图像)4。 radian_interval —每个图像/对象落入我们的圈子的位置； 目前以45度为增量5。 center_of_wheel —在几何上(在空间中)我们的圆心

让我们创建一个场景和该场景的对象。 (Let’s create a scene and objects for that scene.)

We’ll need 7 things:a scene — this will be our canvasa group — this will how we can move ALL of the images/objects at oncea loader — we’ll use this to load in an imagea texture — this will be the image actually loadeda material — a way for us to draw geometry in a neutral waya circle — a piece of geometry we’ll use for our round imagesa mesh — a final product that merges the geometry(circle) with the material

我们将需要7件事： 一个场景 -这将是我们的画布组 -这将是我们如何在加载程序中一次移动所有图像/对象的方法-我们将使用它在图像中加载纹理 -这将是图像实际加载了一种材料 —一种以中性的方式绘制几何图形的方式是一个圆 —我们将在圆形图像中使用的几何图形是一个网格 —将几何(圆)与材料合并的最终产品

Once we have these variables initialized, we’ll create a loop and construct ‘number_of_images’ number of circles and place them around our carousel.

初始化完这些变量后，我们将创建一个循环并构造“ number_of_images ”个圆，并将其放置在轮播中。

<script>
    // Create the scene and a camera to view it
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xFFBEE8);


    const group_cards = new THREE.Group();
    let loader = null;
    let texture = null;
    let material = null;
    let circle = null;
    let mesh = null;


    for (let i = 0; i < number_of_images; i++) {
        // Create a texture loader so we can load our image file
        loader = new THREE.TextureLoader();
        texture = loader.load('obj.png');
        texture.minFilter = THREE.LinearFilter;




        // Load an image file into a custom material
        material = new THREE.MeshBasicMaterial({
            map: texture,
            transparent: true,
            opacity: 1
        });


        circle = new THREE.CircleGeometry(image_radius, 100);
        mesh = new THREE.Mesh(circle, material);


        mesh.material.side = THREE.DoubleSide;


        mesh.position.set(
            center_of_wheel.x + (Math.cos(radian_interval * i) * radius),
            center_of_wheel.y + (Math.sin(radian_interval * i) * radius),
            0);


        // add the image to the group
        group_cards.add(mesh);
    }


    // add group to scene
    scene.add(group_cards);
</script>

Note:To position our geometry around a circle, we use Trigonometry. Specifically the cosine() function for the ‘x’ coordinate and the sine() function for the ‘y’.

注意：要将几何定位在圆周围，请使用Trigonometry 。 具体来说， cosine()函数用于' x '坐标，而sine()函数用于' y '。

让我们为场景创建一个相机。 (Let’s create a camera for our scene.)

Very simple here.Just create a basic camera and make sure to position it back (towards us) by 1000 units.

在这里非常简单。只需创建一个基本相机，并确保将其向后(朝向我们)放置1000个单位即可。

// Specify the portion of the scene visible at any time (in degrees)
let fieldOfView = 75;
let aspectRatio = window.innerWidth / window.innerHeight;
let nearPlane = 0.1;
let farPlane = 1000;
let camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, 
                                          nearPlane, farPlane);camera.position.z = 1000;

差不多了。 渲染器的时间。 (Almost there. Time for the renderer.)

Again, very simple.We’ll set the size of our canvas to full width and height of our page.We’ll make sure to turn on anti-aliasing.

同样，非常简单。我们将画布的大小设置为页面的全宽和全高。我们将确保启用抗锯齿功能。

let renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);// Add the canvas to the DOM       document.querySelector('body').appendChild(renderer.domElement);

最后，让我们渲染场景并聆听鼠标滚轮。 (Finally, let’s render the scene and listen for our mouse wheel.)

We’ll just create an animation loop with ‘requestAnimationFrame()’ and render our scene repeatedly from there.

我们将只使用' requestAnimationFrame()创建一个动画循环，并从那里重复渲染场景。

let scroll_speed = 0.0;
window.addEventListener('wheel', event => {
    scroll_speed = event.deltaY * (Math.PI / 180) * 0.2;    group_cards.rotation.z += -1.0 * scroll_speed;    for (let i = 0; i < group_cards.children.length; i++) {
        group_cards.children[i].rotation.z += scroll_speed;
    }
});requestAnimationFrame(animate);function animate() {
    requestAnimationFrame(animate);    renderer.render(scene, camera);
}

Note:1. The ‘scroll_speed’ is multiplied by (Math.PI / 180) in order to convert to radians.It’s then multiplied by 0.2 to slow down the movement.2. We rotate the images, using a for loop, in the OPPOSITE direction of the wheel. This makes certain that our images stay upright. Omit this block of logic to see what I mean.

注意： 1.将“ scroll_speed ”乘以(Math.PI / 180)，以转换为弧度。然后将其乘以0.2，以减慢运动速度。 我们使用for循环在轮的相反方向上旋转图像。 这可以确保我们的图像保持直立。 忽略此逻辑块即可明白我的意思。

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

如果您想要更深入的指南，请查看我在YouTube上的完整视频教程“对象就是一个对象” 。

THREE.JS —创建旋转图像(或几何图形)轮播(前端Web开发) (THREE.JS — Create a Spinning Image(or Geometry) Carousel (Front-End Web Development))

演示地址

翻译自: https://medium.com/swlh/create-a-three-js-object-wheel-638f04439bc4

js面向对象创建dom对象