Vue

by jxnx888

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<div id="app">
 <div class="builder">
    <div class="main_wrapper">
      <div id="container" class="clearfix"></div>
      <div class="show_more clearfix"><img src="/image/3dBuilder/arrow.png" alt=""></div>
      <div id="shapes" class="clearfix">
        <div class="shapes_wrapper">
          <div class="shapes_options normal" @click="showModule(0)">基础模型 <i
            class="iconfont arrow arrow_right">&#xe6f8;</i></div>
          <div class="shapes_options cartoon" @click="showModule(1)">卡通模型 <i
            class="iconfont arrow arrow_right">&#xe6f8;</i></div>
        </div>
      </div>
      <div id="childWrapper">
        <div class="child_wrapper normal_wrapper" v-if="shapesList.length>0">
          <div v-for="(item, index) in shapesList"
               :key=index
               :class="item.title"
               class="module shapes drag">
            <input v-if="item.module =='shape'" class="this_module" type="hidden" value="0">
            <input v-else-if="item.module =='stl'" class="this_module" type="hidden" value="1">
            <input v-else-if="item.module =='text'" class="this_module" type="hidden" value="2">
            <input class="this_code" type="hidden" :value="item.code">
            <div class="drag sprint" :class="'sprint_'+item.title"></div>
            <div class="name drag">{{item.name}}</div>
          </div>
        </div>
        <div class="child_wrapper cartoon_wrapper" v-if="cartoonStlList.length>0">
          <div v-for="(item, index) in cartoonStlList"
               :key=index
               :class="item.title"
               class="module lego drag">
            <input class="this_module" type="hidden" value="1">
            <input class="this_code" type="hidden" :value="index">
            <div class="drag sprint sprintY" :class="'sprint_'+item.title"></div>
            <div class="name drag">{{item.name}}</div>
         ...

CSS

body {
  margin: 0;
  font-family: Monospace;
  font-size: 13px;
  line-height: 24px;
  overscroll-behavior: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  text-transform: uppercase;
}

canvas {
  display: block;
}

#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 */
}

a, button, input, select {
  pointer-events: auto;
}

.dg.ac {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: #000000;
  color: #ffffff;
}

#overlay > div {
  text-align: center;
}

#overlay > div > button {
  height: 20px;
  background: transparent;
  color: #ffffff;
  outline: 1px solid #ffffff;
  border: 0px;
  cursor: pointer;
}

#overlay > div > p {
  color: #777777;
  font-size: 12px;
}

/*
#container {
    background: #79B1EA; !* Old browsers *!
    background: -moz-linear-gradient(top,  #79B1EA 0%, #4E92EF 100%); !* FF3.6-15 *!
    background: -webkit-linear-gradient(top,  #79B1EA 0%,#4E92EF 100%); !* Chrome10-25,Safari5.1-6 *!
    background: linear-gradient(to bottom, #79B1EA 0%,#4E92EF 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79B1EA', endColorstr='#4E92EF',GradientType=0 ); !* IE6-9 *!
}*/
#container {
  background: #79B1EA; /* Old browsers */
  background: -moz-linear-gradient(top, #79B1EA 0%, #4E92EF 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #79B1EA 0%, #4E92EF...

Vue

import * as THREE from 'https://threejs.org/build/three.module.js'
    import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js'
new Vue({
  el: "#app",
   data(){
            return{
                shapesList: [],
                cartoonStlList: [],
                WORK_SPACE_SIZE : 200,
                CONTAIN_WIDTH: 800,
                CONTAIN_HEIGHT: 400,
                SHAPE_SIZE : 20,
                LIMIT_SIZE : 4,
                renderer:null,
                camera:null,
                scene:null,
                plane:null,
                objects:[],
                gridHelper:null,
                gradGroundMesh:null,
                gradGroundMesh1:null,
                composer:null,
                renderPass:null,
                outlinePass:null,
                effectFXAA:null,
                controls:null,
                transformControl:null,
                container : null,
                orientationContr : null,
                controlsMoved:false,
                shapesEventL:null,
                shapesMain:null,
            }
        },
        methods:{
          init(){
              const _this = this;
              _this.container = document.getElementById( 'container' );
              _this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true, preserveDrawingBuffer: true} );
              _this.renderer.setPixelRatio( ( window.devicePixelRatio ) ? window.devicePixelRatio : 1 );
              // _this.renderer.setSize( this.CONTAIN_WIDTH, this.CONTAIN_HEIGHT );
              _this.renderer.setSize( _this.CONTAIN_WIDTH, _this.CONTAIN_HEIGHT );
              _this.renderer.shadowMap.enabled = true;
              _this.renderer.autoClear = false;
              _this.renderer.setClearColor( 0x000000, 0.0 );
              _this.container.appendChild( _this.renderer.domElement );
              _this.camera = new THREE.PerspectiveCamera( 45,  _this.CONTAIN_WIDTH/_this.CONTAIN_HEIGHT , 1,...