얼마 전에 나는 작은 경기에 참가하는 작품으로 웹 사이트를 만들었다.나는 정취를 더하기 위해 세 가지를 추가하기로 했다.js.내 머릿속에 오랫동안 맴도는 효과가 바로 점운이다.Austin Mayer는 그의 사이트에서 매우 멋진 효과를 거두었다. 내가 그의 사이트에서 그것을 본 이래로 나는 줄곧 이 문제를 생각하고 있다.

오스틴 메르
@아마르

신투자조합!마침내 프로젝트, 아이, 수면 사이에서 이 일을 완성할 시간을 찾았다.👇 austinmayer.co
2019년 2월 21일 오후 19:16
이 사이트에 더 많은 내용이 있기 때문에, 나는 점운의 초기본 버전을 실현하기로 결정했다.세 개.js는 점 구름을 신속하게 만들 수 있는 함수를 제공합니다.

메쉬 대신 점

하나의 격자 (3d 대상) 는 세 부분으로 나뉜다.js는 기하학적, 재료로 구성되어 있다.그러나 전체 메쉬를 표시하기보다는 정점만 표시합니다. Points 반은 3반으로 나뉜다.js는 '완전한' 대상이 아닌 기하학적 도형과 표시점을 사용할 수 있습니다. PointsMaterial 를 사용하여 점의 크기를 조절할 수 있습니다.점 클라우드 그리드의 코드는 다음과 같습니다.

  let geometry = new THREE.TorusGeometry(10, 3, 16, 100)
  let material = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.25 })
  mesh = new THREE.Points(geometry, material)

  scene.add(mesh)

전체 코드에 대해 클릭/예시를 누르고'코드'옵션 카드에 서명하십시오main.js!

3D 모델 사용

에서는 3D 모델을 세 번 로드할 수 있습니다.하지만 너는 반드시 약간의 추가 업무에 투입해야 한다.3D 모델 형식에 따라 마스터 라이브러리 외에 로더를 로드해야 합니다.나는 사용하는 것을 좋아한다.obj는 나 자신을 위해 모형을 만들었기 때문에 나 개인이 필요로 한다OBJLoader

HTML 태그를 통해 라이브러리를 불러오면 세 개의 태그와 함께 단독 스크립트를 불러올 수 있는 추가 태그를 추가해야 합니다.js 다운로드.이 스크립트는 examples/js/loaders/OBJLoader.js에서 찾을 수 있습니다

폴더 불러오는 것을 포함하면 다음과 같습니다:

<script src="three/examples/js/loaders/OBJLoader.js"></script>

npm를 사용하면 jsm 폴더를 통해 마운트 프로그램을 가져올 수 있습니다.만약 당신이 필요한 문법을 좋아한다면, js 폴더를 계속 사용하십시오!가져오기 문장은 다음과 같습니다:

//import syntax
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'

//require syntax, require adds OBJLoader directly to THREE
require('three/examples/js/loaders/OBJLoader.js')

마운트의 작업 방식은 약속하지 않은 확장 "가져오기"와 같습니다.모델을 포함하는 파일의 URL을 삽입하면 불러오는 프로그램이 http 요청을 실행합니다.성공적인 요청, 진행 중인 요청 및 실패한 요청에 대한 콜백을 제공합니다

결과의 첫 번째 하위 형상을 선택하면 로드 대상의 형상을 획득할 수 있습니다

const loader = new THREE.OBJLoader()
loader.load('https://cdn.glitch.com/fcf3c007-b4eb-4250-ba6b-653fdab94ce3%2Fjapanese_temple.obj?1558792651869',
(obj) => {
    // the request was successfull
    let material = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.25 })
    mesh = new THREE.Points(obj.children[0].geometry, material)
    mesh.position.y = -15 //this model is not exactly in the middle by default so I moved it myself
    scene.add(mesh)
},
(xhr) => {
    // the request is in progress
    console.log(xhr)
},
(err) => {
    // something went wrong
    console.error("loading .obj went wrong, ", err)
})

Reference

이 문제에 관하여(세 가지 구름 효과.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/maniflames/pointcloud-effect-in-three-js-3eic

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

세 가지 구름 효과.js

메쉬 대신 점

3D 모델 사용

Reference

좋은 웹페이지 즐겨찾기