Threejs基础环境搭建（一）静态服务器

Posted 2023-04-23

参考技术A 由于后期threeJs需要使用各种外部资源，所以需要搭建服务器，nginx，apache，iis等都可以。
本人则使用nodeJs的koa搭建一个简单的服务器
开发工具使用VSCode

首先需要确保电脑上已经按装了node.js

如果使用VSCode：

vue聊天室的基础静态页面搭建

参考技术A 效果图

HTML:

<template>

    <view class="chat">

        <view class="chat_room">

            <scroll-view scroll-y="true" class="chat_scroll">

                <div class="lang_for">

                    <!-- 消息通知 -->

                    <div class="chat_message">

                        <div class="c_time">2021-12-28 16:50:00</div>

                        <div class="c_txt">XXX处理了这条工单</div>

                    </div>

                    <!-- 左边 -->

                    <!-- <div class="chat_left"></div> -->

                    <!-- 右边 -->

                    <!-- <div class="chat_right"></div> -->

              </div>

              <div class="lang_for">

                <div class="chat_con chat_left">

                    <image src="../../static/logo.png">

                    <div class="message">

                        <div class="m_time">2021-12-28 16:50:00</div>

                        <div class="m_con">这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。</div>   

                    </div>

                </div>

              </div>

              <div class="lang_for">

                <div class="chat_con chat_right">

                    <image src="../../static/logo.png">

                    <div class="message">

                        <div class="m_time">2021-12-28 16:50:00</div>

                    <div class="m_con">这是一条留言，一条好长的留言。可以用if来判断图片文件并且展示</div>

                </div>

            </div>

        </div>

    </scroll-view>

 </view>

<view class="chat_send">

        <input type="text">

        <button>发送</button>

</view>

</view>

</template>

style:

<style lang="scss" scoped>

.chat

.chat_room

border-top: 1px solid #CCCCCC;

padding: 0 32rpx 10rpx;

.chat_scroll

height:calc(100vh - 352rpx - var(--window-bottom)); //自己看着来减少



.lang_for

.chat_message

width:100%;

text-align: center;

font-size: 24rpx;

font-weight: 500;

color: #aaa;

padding: 32rpx;

box-sizing: border-box;



.chat_con

display: flex;

image

width:96rpx;

height:96rpx;

border: 1px solid #707070;

box-sizing: border-box;

border-radius: 50%;



.message

margin-left:16rpx;

.m_time

font-size: 24rpx;

color: #333333;

line-height:44rpx;



.m_con

max-width: 540rpx;

min-height: 80rpx;

line-height:40rpx;

background: #FFFFFF;

border-radius: 0px 8rpx 8rpx 8rpx;

font-size:28rpx;

color: #111111;

padding:20rpx;

box-sizing: border-box;







.chat_left



.chat_right

flex-direction: row-reverse;

.message

margin-right:16rpx;

.m_time

text-align: right;



.m_con

background: #9EEA6A ;

border-radius: 8rpx 0px 8rpx 8rpx;









.lang_for+.lang_for

margin-top:10px;





.chat_send

display: flex;

padding:48rpx 32rpx;

background:#fff;

input

width: 520rpx;

height: 60rpx;

background: #F5F5F5;

border-radius: 8rpx;

padding:0 16rpx;



button

width: 104rpx;

height: 60rpx;

line-height: 60rpx;

margin-left:32rpx;

color:#FFFFFF;

font-weight: bold;

background: #D60011;

border-radius: 8rpx;

border:none;

font-size:24rpx;

padding:0;







</style>